使用 Material Design 编辑模式时如何选择选项

Question

我正在使用下拉菜单来选择多个角色。单击编辑按钮时，我想将2 roles 签出3 roles。因为用户在admin, dashboards, user 中有两个角色admin, dashboards。

我将检查来自服务器的角色和角色列表，如果角色名称相同，我将创建selected = true。所以，我只能选择selected is true 的选项。 我如何意识到这一点？此代码基于Angular 8。

打字稿

this.user.roles = roles;

榜样

    id: number;
    name: string; 
    selected :boolean;

html

<div class="col-lg-6 kt-margin-bottom-20-mobile">
    <mat-form-field class="mat-form-field-fluid">
        <mat-select placeholder="Role"
                    formControlName="roles"
                    multiple>
            <mat-option *ngFor="
                    let role of roles$ | async " [value]="role">
                {{ role.name }}
            </mat-option>
        </mat-select>
        <mat-error *ngIf="isControlHasError('roles','required')">
            <strong>{{ 'AUTH.VALIDATION.REQUIRED_FIELD' | translate }}</strong>
        </mat-error>
    </mat-form-field>
</div>

Answer 1

要对预选/默认值进行双向绑定，请使用[formControl]

<mat-select placeholder="Role" [formControl]="selectedRole" multiple>
  <mat-option *ngFor="let role of roles$ | async " [value]="role.id">
    {{ role.name }}
  </mat-option>
</mat-select>

在 .component.ts 中，你的代码应该是这样的

selectedRole= new FormControl();
ngOnInit(){
  getUserRole()
}

getUserRole(){
...
this.selectedRole.setValue(role.id)  // role = {id:3,name:'user'}
}