[英]Material Select menu with checkbox
我正在寻找创建带有集成复选框的 select 菜单。 我有 3 个菜单,第一个是 select 角色用户,第二个是用户访问权限。 如果我在第一个菜单上使用 select 管理员用户,我想检查 2 个下一个菜单。 但我不能同时 select 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>
要只允许从mat-select
中选择一个选项,请不要使用multiple
选项:
<mat-select
placeholder="Role User"
name="RoleUser"
class="filter-select">
对于 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.