使用材料设计编辑模式时如何选择选项
使用材料设计编辑模式时如何选择选项
提问于 2020-04-30 04:45:54
我使用下拉到多个选择的角色。单击“编辑”按钮时，我希望将2 roles从3 roles中签出。因为用户在admin, dashboards中有两个角色admin, dashboards, user。
我将检查来自服务器的角色和角色列表，如果角色名称相同，我将创建selected = true。因此，我只能选择selected is true的选项。我怎么能意识到这一点？此代码基于Angular 8。
类型标
this.user.roles = roles;角色模型
id: number;
name: string;
selected :boolean;html
<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>回答 1
Stack Overflow用户
发布于 2020-04-30 05:28:31
要使预选/默认值的双向绑定使用[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>在.component.ts中，您的代码应该如下所示
selectedRole= new FormControl();
ngOnInit(){
getUserRole()
}
getUserRole(){
...
this.selectedRole.setValue(role.id) // role = {id:3,name:'user'}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61516103
复制相关文章
相似问题
腾讯云开发者
