带异步源的角度选择-默认值

Posted 2021-05-03

我有很多绑定到HTTP服务的<select>（从基础REST API提取数据）。我试图尊重Angular中的Reactive模式，这是代码：

<select class="custom-select" formControlName="bankAccountId" >
    <option *ngFor="let x of bankAccounts$ | async" [value]="x.id" >{{ x.name }}</option>
</select>

此结果为空白选择，用户必须手动选择选项。我想预选select中的第一个值（大多数情况下，用户会手动选择该值）。我知道如何使用命令式模式来实现此目的。

ngOnInit() {

 this.bankAccounts$ = this.httpService.getBankAccounts();

 this.bankAccounts$.subscribe(data => {
  this.form.patchValue({ bankAccountId: data[0].id });
 });
}

有什么方法可以实现此功能而无需手动订阅Observable？谢谢！

答案

使用tap运算符。这样我们就不必手动订阅。