Question

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

如何根据＆＃39; onLoaded＆＃39;逐个绑定标题？发射。基本上，我希望在每次成功加载数据后逐个加载小部件（输出方法onLoaded发出布尔值）。

Answer 1

非常奇怪的要求所以你可以这样开始

1）创建空的新数组forLoop：any [] = [];

2）在显示标题值之前（可能在ngonint（）中）将headers数组中的第一个元素添加到forLoop数组

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

3）现在显示forLoop数组

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

Angular 2 - 逐个加载动态组件

1 个答案: