Меню выбора материала с флажком

Question

Я ищу создать меню выбора со встроенным флажком.У меня есть 3 меню, сначала выберите роль пользователя и 2 секунды, доступ пользователя.Если я выберу администратора в первом меню, я хочу, чтобы в следующем меню все 2 были отмечены.Но я не могу выбрать двух пользователей одновременно.

, так что это мой код

Ts-файл (не весь код, только та часть, которая мне нужна)

    fixture_access_list = [];
    group_access_list = [];
    role_list = [];

    form: FormGroup;
    formSubmitAttempt: boolean;
    isPasswordVisible = false;


    constructor(private formBuilder: FormBuilder, private userService: UserService, public dialog: MatDialog, public dialogRef: MatDialogRef<CreateUserDialogComponent>) {

      this.role_list = [
        {id: 1, viewValue: "Admin" },
        {id: 2, viewValue: "Client"}
      ];

      this.fixture_access_list = [
        {id: 1, viewValue: "Reading"},
        {id: 2, viewValue: "Editing"},
        {id: 3, viewValue: "Flipping"},
        {id: 4, viewValue: "Locating"}
      ];

      this.group_access_list = [
        {id: 1, viewValue: "Reading"},
        {id: 2, viewValue: "Creating"},
        {id: 3, viewValue: "Editing"},
        {id: 4, viewValue: "deleting"},
        {id: 5, viewValue: "Flipping"},
        {id: 6, viewValue: "Locating"}
      ];
    }

HTML

 <mat-list-item class="primary-menu-item" role="listitem">
            <mat-form-field class="select-form">
              <mat-select
                placeholder="Role User"
                name="RoleUser"
                class="filter-select"
                multiple>
                <mat-option *ngFor="let role of role_list" [value]="role">
                  {{role.viewValue}}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </mat-list-item>


          <mat-list-item class="primary-menu-item" role="listitem">
            <mat-form-field class="select-form">
              <mat-select
                placeholder="Fixture Access"
                name="FixtureAccess"
                class="filter-select"
                multiple>
                <mat-option *ngFor="let fixture of fixture_access_list" [value]="fixture">
                  {{fixture.viewValue}}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </mat-list-item>


          <mat-list-item class="primary-menu-item" role="listitem">
            <mat-form-field class="select-form">
              <mat-select
                placeholder="Group Access"
                name="GroupAccess"
                class="filter-select"
                multiple>
                <mat-option *ngFor="let group of group_access_list" [value]="group">
                  {{group.viewValue}}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </mat-list-item>

Answer 1

Чтобы разрешить выбор только одного параметра из mat-select, не используйте параметр multiple:

<mat-select
  placeholder="Role User"
  name="RoleUser"
  class="filter-select"> 

Чтобы выбрать элементы в одном списке на основе выбранного параметра в другом спискеиспользуйте событие selectionChange в списке «control», чтобы установить значение выборов в списке «target»:

<mat-select placeholder="Role User" name="RoleUser" class="filter-select" 
    (selectionChange)="roleChanged($event.value)">
  ...
</mat-select>

<mat-select placeholder="Fixture Access" name="FixtureAccess" class="filter-select" multiple 
    [value]="selected_fixture">
  ...
</mat-select>

TS:

selected_fixture = [];

roleChanged(role) {
  if (role.id === 1) {
    this.selected_fixture = [...this.fixture_access_list];
  } else {
    this.selected_fixture = [];
  }
}

https://stackblitz.com/edit/angular-y8zv2o?file=app/list-overview-example.ts