角2 - 動的コンポーネントを1つずつロードする

Question

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

「onLoaded」エミットに基づいてヘッダーを1つずつバインドする方法。基本的には、データロードが成功するたびにウィジェットが1つずつロードされるようにしたい（出力メソッドonLoadedはbooleanを送出する）。

Answer 1

その非常に奇妙な要件あなたはこの

1）を作成し、空の新しい配列forLoopのように起動することができるように：任意の[] = [];ヘッダー値を表示する前に

2）（ngonintであってもよい（））

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

3ヘッダアレイからforLoopアレイに最初の要素を追加する）今）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メソッドでヘッダ配列から2番目の要素を削除するforloop配列への追加

onLoaded(){ 

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

5）ヘッダー配列が空になるまでこのプロセスを続行する。