Angular 2 - Load the dynamic components one by one

问题:

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

How to bind headers one by one based on the 'onLoaded' emit. Basically, I want the widget to load one by one after each successful data load(output method onLoaded emits boolean).

回答1:

Its very weird requirement so you can start like this

1) create empty new array forLoop: any[] = [];

2) Before displaying headers values( may be in ngonint()) add first element from the headers array to forLoop array

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

3) now display forLoop array

<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) on the onLoaded method remove second element from header array add into forloop array

onLoaded (){

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

5) continue this process for till the headers array is empty