Angular 5 - 填充选项在mat-select With Objects？没有NgFor？

Question

NgFor通过迭代数组来填充下拉列表或列表。但是，Observables为我们提供了一个数据流，在我的案例对象中，已经“迭代”了。为什么循环？只是开始制作选项。

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

当我有一个很好的对象流应该取代NgFor时，我似乎不需要一个数组。我正在考虑这样的事情，并在从Observable收到对象时创建一个新选项：

<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

如果要迭代一个observable，可以使用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)