Angular 2 - 逐個加載動態組件

Question

<div *ngFor="let header of headers">  
    <widget [header]="header" (loaded)="onLoaded($event)"></widget> 
</div> 

如何基於'onLoaded'發出一個接一個的頭部。基本上，我希望小部件在每次成功的數據加載之後逐一加載（輸出方法onLoaded發出布爾值）。

Answer 1

它非常奇怪的要求以便可以開始這樣

1）創建空的新的數組for循環：任何[] = [];

2）顯示標題值之前（可以是ngonint（））從報頭陣列添加第一元件到for循環陣列

`forLoop.push(headers.Shift())` // it will remove first element from the headers array and add into forLoop 

3）現在顯示for循環陣列

<div *ngFor="let header of forLoop;trackBy: trackByFn">  
    <widget [header]="header" (loaded)="onLoaded($event)"></widget> 
</div> 

trackByFn(index, item) { 
    return index; // or item.id 
    } 

4）在onLoaded方法中刪除第二個元素從標題數組添加到forloop數組中

onLoaded(){ 

    if(headers.length >0){ 
    forLoop.push(headers.Shift()) 
    } 
} 

5）繼續此過程，直到標題數組爲空