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

Question

我有一个像 ngFo 循环这样的 ngFo 循环

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

我想在顶部添加一个项目，例如"全部"或"选择">

我在 .ts 中的代码是

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

上图森天文台

我该怎么做， 请指教。

谢谢

Answer 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>