как выбрать параметры в режиме редактирования с использованием Material Design

Question

Я использую раскрывающийся список для выбора нескольких ролей. Когда я нажимаю кнопку редактирования, я хочу получить 2 roles из 3 roles. поскольку у пользователя есть две роли admin, dashboards из admin, dashboards, user.

, я проверю роли на сервере и список ролей, и если имена ролей совпадают, я сделаю 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'}
}