Okay so I'm trying to get data from Web API that I made in angular. Web API is working I tested it using Postman and Postman gets the data from Web API just fine here is the screenshot of Postman getting the data from Web API " http://prntscr.com/nr18ct ". That makes me certain that it is a problem with angular. And I'm sorry if I don't make sense or if the rest of the question / post is f**ed up first time asking a question here.
I did follow angular tutorial on Angular.io I really don't know what it could cause it, just to say it worked perfectly fine before I did the last part of the tutorial, that is trying to get data from Web API. My first thought was maybe I f**ed up something in PagedVehicleMake class in angular (typescript class) or VehicleMake class also in angular also typescript class
Web API part: As you saw in the screen shot I sent before Web API sends that type of data.
public class PagedResult<T> : IPagedResult<T> where T : class
{
public int PageNumber { get; set; }
public int PageSize { get; set; }
public int TotalNumberOfPages { get; set; }
public IEnumerable<T> Results { get; set; }
}
and IEnumrable Results in this case is IEnumrable Results and VehicleMakeVM is:
public class VehicleMakeVM
{
public int Id { get; set; }
public string Name { get; set; }
public string Abrv { get; set; }
}
Now for Angular part:
export class PagedVehicleMake{
Results : VehicleMake[];
TotalNumberOfPages : number;
PageSize : number;
PageNumber : number;
}
I tried to arrange PagedVehicleMake class the same way data is sent to Postman showed in a screenshot I sent. I thought maybe it had something to do with that.
export class VehicleMake {
Id : number;
Name : string;
Abrv : string;
}
and here is the VehicleMakeService class in angular:
export class VehicleMakeService {
constructor(private http: HttpClient, private messageService : MessageService) { }
private vehiclemakesUrl = "http://localhost:53282/api/VehicleMake"
/**GET vehiclemakes from the server */
getVehicleMakes() : Observable<PagedVehicleMake>{
this.messageService.add("VehicleMakeService : fetched VehicleMakes")
return this.http.get<PagedVehicleMake>(this.vehiclemakesUrl).pipe(
catchError(this.handleError<PagedVehicleMake>("getVehicleMakes", []))
);
}
/**
* Handle Http operation that failed.
* Let the app continue.
* @param operation - name of the operation that failed
* @param result - optional value to return as the observable result
*/
private handleError<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
// TODO: send the error to remote logging infrastructure
console.error(error); // log to console instead
// TODO: better job of transforming error for user consumption
this.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};
}
/** Log a VehicleMakeService message with the MessageService */
private log(message: string) {
this.messageService.add(`VehicleMakeService: ${message}`);
}
I expected it to just get the data from WebAPI but it somehow isn't capable of getting the data.
Aucun commentaire:
Enregistrer un commentaire