Mat-select：通过promise加载数据时没有预先选择的值

Question

我通过http加载mat-select的组数组。 我的.ts代码如下所示：

async ngOnInit(): Promise<void> {
    this.groups = await this.service.loadGroups();
    this.form = new FormGroup( 
        groupId: new FormControl(this.user.groupId || 0)
    );
}

public get groupId(): AbstractControl { return this.from.get('groupId'); }

并在我的HTML中：

<mat-form-field>
    <mat-select formControlName="groupId" [value]="resellerGroupId.value" required>
         <mat-option *ngFor="let group of groups" [value]="group.id">
             {{ group.name }}
         </mat-option>
     </mat-select>
</mat-form-field>

所以当我加载这样的数据时，我在mat-select中没有预先选择的值。如果数据被作为一个值数组进行硬编码 - 没有问题，但是当我添加Promise时它就会破坏。 我无法理解为什么在loadGroups（）promise得到解决后，ui的值不会更新。

Answer 1

您需要使用带有mat-option的异步管道。看看autocomplete example，看看它是如何完成的。