Angular7 - 从 API 调用获取响应

Question

我是 Angular 7 的新手，正在尝试了解 Http Client 的工作原理。 来自 Angular 应用程序的 APi 调用已完成，但我得到如下响应

我的 service.ts 如下所示

export class ReportingFilterService {
 shipmentByProjectResult: any[];

  constructor(service: DataService) {
  }
  getShipmentByPrj(): ShipmentByProject[] {
    return this.shipmentByProjectResult;
   }
 }

其中 ShipmentByProject 是模型类

export class ShipmentByProject {
Id: string;
project_number: string;
related_project_number: string;
Reporting_Project: string;  
customer_shipto_name: string;
sales_order_TJL_ship_date: Date |string|null;
deliverydate: Date |string|null;
delivery_mode : string;
customer_purchase_order: string;
total_qty: number|null;
}

和组件

export class ReportingFilterComponent implements OnInit {
  ShipmentList: ShipmentByProject[];
  entityUrl = 'ShipmentDetail/GetByReportingProject?repPrj=000634';

  constructor(service: DataService) {
   service.get<ShipmentByProject[]>(this.entityUrl).subscribe(x => 
  {this.ShipmentList = x });
   }
 ngOnInit() {  }}

我只是在 html 中调用响应，就像Reporting filter works! {{ShipmentList}} Reporting filter works! {{ShipmentList}} 。 我不确定我在这里缺少什么。 感谢任何帮助，因为我正在学习并且是 Angular 的新手

Answer 1

因为你的数据是数组格式所以你应该像这样循环你的数据

  <li *ngFor="let shipment of ShipmentList">
      {{ shipment.customer_shipto_name }}
  </li>

Answer 2

您的数据变量 'ShipmentList' 被初始化为一个数组。 因此，您应该迭代数组以获取每个运输数据，如下所示：

<div *ngFor="let shipment of ShipmentList">{{shipment.objectName}} //objectName can be Id,customer_purchase_order etc
</div>