在Angular中使用async管道时，如何设置选择元素的空值和默认值？

Question

我试图在我的Angular应用程序中使用async管道，在我的Typescript文件中，这。

this.mySupplierList$ = this._mySupplierService.getSupplierList();

和HTML文件中。

<select>
  <option *ngFor="let supplier of supplierList$ | async" [ngValue]="supplier">{{supplier.Name}}</option>
</select>

我有两个问题

1. 我如何将选择的默认值设置为mySupplierList中的第一个或最后一个供应商？

2. 我如何添加一个空的供应商项目作为选择的第一个元素？

Answer 1

1. 使用ngModel来设置一个默认值。
2. 为空的供应商项目添加一个没有任何值的标签。

<select  [(ngModel)]="yourModel">
  <option>Empty</option>
  <option *ngFor="let supplier of supplierList$ | async" [ngValue]="supplier">{{supplier.Name}}</option>
</select>

下面是一个 例子 在stackblitz上。