带复选框的材料 Select 菜单

Question

I'm looking for create a select menu with integrated checkbox. I have 3 menus, first select role user and the 2 second, user access. If I select admin user on the first menu, I want to have 2 next menu all checked. But i can't select 2 role user at the same time.

so this is my code

Ts file (not all the code, just the part who I need )

    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

To allow only one option to be selected from a mat-select , don't use the multiple option:

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

To select items in one list based on the selected option in another list, use the selectionChange event on the 'control' list to set the value of the selections in the 'target' list:

<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