Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/symfony/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 使用“材质设计”编辑模式时如何选择选项_Angular_Angular8 - Fatal编程技术网

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。我可以选择两个角色吗?而不是一个?