Question

我正在使用mat-select数组来显示包含一些像这样的对象的数组：

typesOfAccess = [{1 : 'View Image'},{2 : 'Tag MPxN'},
{3 : 'Configure User'},{4 : 'Assign UserGroup'},
{5:.......},{6:..........}]

我正在从API订阅数据，API的数字及其字符串值保存在数组中。如下所示：

this.UserEditForm = this.formBuilder.group({
      is2FAEnabled:[''],
      AccessRights : ['',Validators.required]
    });

我想显示我从api获得的要在HTML中预先选择的数组的编号。

<mat-selection-list formControlName="AccessRights" (ngModelChange)="onNgModelChange($event)" required>
    <mat-list-option *ngFor="let tta of typesOfAccess; let i = index" [value]="i+1" [selected]="AccessRights.option">
      {{tta[i+1]}}
   </mat-list-option>
 </mat-selection-list>

请在这里帮助。

Answer 1

根据documentation：

每个控件名称的值是一个数组，其中包含初始值作为数组中的第一项。

组件中的初始值为''。将其更改为您想要的初始值：

AccessRights : [initialValue ,Validators.required]

Answer 2

删除选择属性绑定，仅更新将反映到html元素的表单控件值

<mat-selection-list formControlName="AccessRights" >
    <mat-list-option *ngFor="let tta of typesOfAccess; let i = index" [value]="i+1">
      {{tta[i+1]}}
     </mat-list-option>
</mat-selection-list>

在创建表单组时设置AccessRights值

this.UserEditForm = this.formBuilder.group({
      is2FAEnabled:[''],
      AccessRights : ['2',Validators.required]
    });

或像这样手动设置值

this.UserEditForm.get('AccessRights').setValue('2'); // will select Tag MPxN

已更新??

您需要发送所选项目的数组基，例如[1,3]

this.UserEditForm.get('AccessRights').setValue([1,3]); // ?

如果您要像这样选择一个值

this.UserEditForm.get('AccessRights').setValue([3]); // ?

demo ??

我想要更新表格中的预选选项

2 个答案: