angular - 在Angular中使用异步管道时如何设置选择元素的空值和默认值

Question

我正在尝试在我的 Angular 应用程序中使用异步管道，这在我的 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的示例。

Answer 2

1. FormControl在选择输入上使用 ReactiveForms

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

并使用setValue函数从水龙头管道函数FormControl中的 observable 设置初始值

selectedSupplier = new FormControl();

this.mySupplierList$ = this._mySupplierService.getSupplierList()
.pipe(
  tap((suppliers)=> {
    this.selectedSupplier.setValue(suppliers[suppliers.length - 1]);
  })
);

2. 使用 RxJs 的map函数操作 observable 中的数据。使用 Javascript 数组unshift函数将对象添加到数组中。

this.mySupplierList$ = this._mySupplierService.getSupplierList()
.pipe(
  map((suppliers)=> {
    suppliers.unshift({ id: null, name: "Select" });
    return suppliers;
  })
);

Stackblitz两种解决方案