我如何以反应形式访问模板中的异步数据以设置 mat-select 的 selected 值

Question

我有一个表单，它使用可观察的查询并从 API 获取数据以允许用户编辑该数据。下面是我用来获取数据的代码，我可以通过 patchValue 填充表单上的所有字段。

menuData$: Observable<IMenu>;
ngOnInit(){    
this.menuData$ = this.menuService.fetchMenuItem(docId).pipe(
        tap(menuData  => this.form.patchValue(menuData)),
        tap(menuData => console.log(menuData)),
        )
}

我运行遇到的问题是，在我的例子中，menuData 的 parents 字段包含我的 mat-select 的值，但我无法正确设置它。

我的 html 模板中的代码如下所示

<form *ngIf="menuData$ | async; else loading" [formGroup]="form">
<mat-form-field class="col-md-8"  ngDefaultControl label=" " formControlName="parent">
    <mat-label>Parent</mat-label>
    <mat-select [(value)]="parent">
    <mat-option value="" aria-selected="true" selected> --Select Parent -- </mat-option>
    <mat-option *ngFor="let parent of menuParents$ | async" [value]="parent._id">
        {{ parent.name}}
    </mat-option>
    </mat-select>
    </mat-form-field>
</form>

所以我的问题是我如何 set/bind 我的 mat-select 的值到我从查询中得到的值。我可以通过定义一个新变量 testValue: string 然后在管道中设置像 tap(menuData => (this.testValue = menuData.parent))。即便如此，我认为这不是实现此目标的最佳或最干净的方法。

Answer 1

在 *ngIf 中使用 as，然后从 <mat-select>:

中引用该对象

<form *ngIf="menuData$ | async as menuData; else loading" [formGroup]="form">
...
<mat-select [(value)]="menuData.parent">

我如何以反应形式访问模板中的异步数据以设置 mat-select 的 selected 值

How can i access in reactive form async data in template to set selected value for mat-select

angular-material

angular