如何从角度工作的Web API获取数据？

Question

好的，所以我试图从Web API中获取我的角度数据。 Web API工作我使用Postman测试它，Postman从Web API获取数据就好了这里是Postman从Web API“ http://prntscr.com/nr18ct ”获取数据的截图。 这让我确信这是一个有角度的问题。 我很抱歉，如果我没有意义，或者问题/帖子的其余部分是第一次在这里问一个问题。

我确实遵循Angular.io上的角度教程我真的不知道它可能导致它，只是说它在我完成教程的最后一部分之前工作得很好，就是试图从Web API获取数据。 我的第一个想法是，也许我在角度（typescript类）中的PagedVehicleMake类或者在角度也是typescript类的VehicleMake类中添加了一些东西。

Web API部分：正如您在Web API发送该类型数据之前发送的屏幕截图中看到的那样。

    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; }
}

和IEnumrable在这种情况下的结果是IEnumrable结果和VehicleMakeVM是：

    public class VehicleMakeVM
{
        public int Id { get; set; }
        public string Name { get; set; }
        public string Abrv { get; set; }
}

现在为Angular部分：

export class PagedVehicleMake{
    Results : VehicleMake[];
    TotalNumberOfPages : number;
    PageSize : number;
    PageNumber : number;
}

我试图安排PagedVehicleMake类，就像我发送的截图中显示的数据一样。 我想也许它与此有关。

export class VehicleMake {
    Id : number;
    Name : string;
    Abrv : string;
}

这里是angular的VehicleMakeService类：

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}`);
    }

我希望它只是从WebAPI获取数据，但它无法获取数据。

Answer 1

我想出了问题所在。 实际上我忘了启用CORS，这就是WebAPI。