角度5 - ポピュレートオプションマットでオブジェクトを選択しますか？ NgForではありませんか？

Question

NgForは、配列を反復処理することによってドロップダウンまたはリストを作成します。しかし、Observablesは、私のケースのオブジェクトでは、既に "反復"されている一連のデータを提供しています。なぜループ？ちょうどオプションを作るために働くことができます。

{skill_id: 8, skill_name: "Whatever"} 
{skill_id: 9, skill_name: "Something"} 

NgForに替わるべきオブジェクトのような素敵なストリームがある場合、配列は必要ありません。私はこのような何かを考え、物体が観測から受信されているように、新しいオプション作成しています：

<mat-select placeholder="Select one"> 
    <mat-option (click)="loadIdValueInForm(skill_id)" 
        [value]="skill_name">{{skill_name}} 
    </mat-option> 
</mat-select> 

は、オブジェクトの配列から、さまざまな方法でこれを行う古いポストのさまざまありますが、それは次のようになりますObservableの一般的な設定の結果を参考にすれば、より良い結果が得られます。何か案は？これについて創造的な人は誰ですか？

private getListData(dbTable) { 
    this.skills$ = this.httpService.getDropDownList(dbTable) 
     .map(data => data.resource) 
     .switchMap(data => data) 

Answer 1

あなたは、観察を反復処理したい場合は、そのためasyncパイプを使用することができます。あなたの例では

：

<mat-option (click)="loadIdValueInForm(skill_id)" 
        *ngFor="let skill of skills$ | async" 
        [value]="skill.skill_name">{{skill_name}} 
    </mat-option> 

次に、あなたのコードから次の部分を削除することができます。

.map(data => data.resource)