angular-material2 - 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() 承诺得到解决后 ui 上的值没有更新。

Answer 1

您需要使用带有 mat-option 的异步管道。查看自动完成示例以了解它是如何完成的。