具有可观察添加选择值的 Angular ngFor答案

【问题标题】：Angular ngFor with observable add select value具有可观察添加选择值的 Angular ngFor
【发布时间】：2018-10-23 09:35:48
【问题描述】：

我有一个像

这样的 ngFo 循环

<mat-option *ngFor="let checklist of filterChecklist | async" [value]="checklist.checklistName" (click)="filterList(checklist.checklistName)">
              <span>{{ checklist.checklistName }}</span>
            </mat-option>

我想在顶部添加一个项目，例如“ALL”或“Select”

我在 .ts 中的代码是

filterChecklist: any;
    this.filterChecklist = this.dataSharingService.filters();

高于观测值

我该怎么做，请指教。

谢谢

【问题讨论】：

在mat-select 元素上使用placeholder="please select one" 属性。

标签： angular google-cloud-firestore observable ngfor

【解决方案1】：

也许我不明白你需要什么，但是

像这样在您的 ngFO 之前添加<mat-option>ALL</mat-option>？

<mat-option>ALL</mat-option>
<mat-option *ngFor="let checklist of filterChecklist | async" [value]="checklist.checklistName" (click)="filterList(checklist.checklistName)">
              <span>{{ checklist.checklistName }}</span>
</mat-option>

【讨论】：