Angular 使用“材质设计”编辑模式时如何选择选项
我使用下拉菜单选择多个角色。单击编辑按钮时,我想从Angular 使用“材质设计”编辑模式时如何选择选项,angular,angular8,Angular,Angular8,我使用下拉菜单选择多个角色。单击编辑按钮时,我想从3个角色中签出2个角色。因为用户有两个角色admin,dashboards,而不是admin,dashboards,user 我将检查服务器中的角色和角色列表,如果角色名称相同,我将使selected=true。因此,我只能选择selected为true的选项。 我是如何认识到这一点的?此代码基于角度8 typescript this.user.roles = roles; 榜样 id: number; name: strin
3个角色中签出2个角色
。因为用户有两个角色admin,dashboards
,而不是admin,dashboards,user
我将检查服务器中的角色和角色列表,如果角色名称相同,我将使selected=true
。因此,我只能选择selected为true的选项
。
我是如何认识到这一点的?此代码基于角度8
typescript
this.user.roles = roles;
榜样
id: number;
name: string;
selected :boolean;
<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>
html
id: number;
name: string;
selected :boolean;
<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>
{{role.name}
{{'AUTH.VALIDATION.REQUIRED_FIELD'| translate}}
要对预选/默认值进行双向绑定,请使用[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>
在mat选项中使用[(ngModel)]=“角色”而不是值这将给我两个选项。我想做的是从三个选项中选择两个。selectedRole
应该有
的[value]
字段。请检查更新后的答案。您还需要做的是使[value]
字段不是对象。其他表单控件使用的是什么?另外,使用我共享的示例,您没有使用任何formControlName
属性,我希望继续使用formControlName而不是formControl。我可以选择两个角色吗?而不是一个?