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）继续此过程，直到标题数组为空