Как обрабатывать асинхронный вызов API?

Question

У меня есть массив объекта JSON и вы должны добавить результат API-атаки с каждым объектом JSON, к определенному элементу каждого объекта 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 является calcuating со стороны 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, пока данные с сервера становится доступным How to pass parameters rendered from backend to angular2 bootstrap method