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

Question

我正在尝试在我的 Angular 应用程序中使用异步管道，而在我的 Typescript 文件中：

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

和 HTML 文件：

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

我有两个问题：

如何将 select 的默认值设置为 mySupplierList 中的第一个或最后一个供应商？
如何添加空的供应商项目作为 select 的第一个元素？

Answer 1

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

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

这是关于 stackblitz 的 example。

Answer 2

在 select 输入上使用 ReactiveForms FormControl

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

并使用setValue function on the FormControl to set the initial value from the observable in a tap管道函数

selectedSupplier = new FormControl();

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

使用 RxJs map function. Add an object to the array using the Javascript array unshift 函数操作可观察对象中的数据。

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

Stackblitz 两种解决方案

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

How to set empty and default value of a select element when using async pipes in Angular

angular

rxjs

angular2-observables

async-pipe