问题
<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
来源：https://stackoverflow.com/questions/45103822/angular-2-load-the-dynamic-components-one-by-one