Question

我正在寻找创建带有集成复选框的选择菜单。我有3个菜单，第一个选择角色用户，第二个选择用户权限。如果我在第一个菜单上选择admin user，那么我要选中两个下一个菜单。但是我不能同时选择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事件来设置“目标”列表中的选择值：

<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

带有复选框的材料选择菜单

1 个答案: