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

【问题标题】：How to set empty and default value of a select element when using async pipes in Angular在Angular中使用异步管道时如何设置选择元素的空值和默认值
【发布时间】：2020-04-24 14:44:40
【问题描述】：

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

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

和 HTML 文件：

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

我有两个问题：

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

【问题讨论】：

我无法进入您在第一个选项中所做的事情？
是你没有得到的异步管道吗？这是一种将 observable 绑定到 select 的方法，而不是使用 subscribe 来获取值。

标签： angular rxjs angular2-observables async-pipe

【解决方案1】：

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

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

这是 stackblitz 上的 example。

【讨论】：

感谢您的回复，B45i！我正在寻找的是如何为所选值创建模型（作为可观察的）。该模型将列表中的最后一个供应商作为初始值。关于空元素，有没有办法将其添加到可观察的供应商列表中，而不仅仅是添加一个静态元素？
@frank-jusnes 在 stackblitz 中为您创建了一个示例：stackblitz.com/edit/stackoverflow-61411044。我尝试使用您使用的变量名称，但由于我无法访问确切的 API，因此不得不在几个地方进行更改。

【解决方案2】：

在选择输入上使用 ReactiveForms FormControl

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

并使用FormControl 上的setValue 函数从tap 管道函数中的可观察对象中设置初始值

selectedSupplier = new FormControl();

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

使用 RxJs map 函数处理 observable 中的数据。使用 Javascript 数组 unshift 函数将对象添加到数组中。

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

Stackblitz 两种解决方案

【讨论】：