如何处理对 API 的异步调用？

Question

我有 JSON 对象数组，必须将每个 JSON 对象命中的 API 结果添加到每个 JSON 对象的特定元素，并且最终结果应该显示在 HTML 文件中？但是 HTML 页面在从 API?

检索到的数据之前已经呈现

问题是这样的：

<tr *ngFor="let order of Orders">
    <td><img src="images/honey.jpg" style="width:50px;"/>
        <span style="margin-left:10px;">{{order.productName}} <strong>[ package:</strong> {{order.packageName}}<strong>]</strong></span></td>
    <td><input type="number" class="form-control" step="1" style="width:80px;" [value]="order.quantity" /></td>
    <td><span>NPR Rs.{{order.Rate|number}}</span></td>
    <td><strong>{{order.totalPrice}}</strong></td>
    <td>
        <a href="#" style="color:#F00"><i class="fa fa-trash" (click)="removeItem(order)"></i> Remove</a>
    </td>
</tr>

只有totalPrice是从API这边计算的，其他所有内容都已经在Orders变量中。

在 ts 文件：

calculatePrice(){
     let i;
     for(i =0;i<this.Orders.length; i++){
         this.dataService.post("order/prices",this.Orders[i])
             .subscribe(res=>{
                 this.Orders[i]['totalPrice'] = res.totalPrice;
             })
     }
}

Answer 1

您可以在组件中的元素上使用 *ngIf="data" 以防止在 data 获得值或
之前呈现您可以使用守卫来防止在数据可用之前路由到组件 https://angular.io/docs/ts/latest/guide/router.html#!#guards

您还可以阻止整个 Angular2 应用程序的初始化，直到来自服务器的数据可用

如何处理对 API 的异步调用？

How to handle asynchronous call to API?

angular2-services

angular2-http

angular