在 Material Select 中添加数组类型值 Angular

Question

我正在尝试将数组类型绑定到 Angular 项目中的 Material Select，但它返回以下错误。

ERROR Error: Uncaught (in promise): Error: Value must be an array in multiple-selection mode.

这是我的代码，

模板

<ng-template kendoRippleContainer kendoGridEditTemplate let-dataItem let-column="column" let-formGroup="formGroup">   

        <mat-form-field>
                <mat-label>Roles</mat-label>
                <mat-select [formControl]="formGroup.get(column.field)" multiple [(value)]="dataItem">
                  <mat-option *ngFor="let role of roleList" [value]="role._id">{{role.roleName}}</mat-option>
                </mat-select>
              </mat-form-field>

      </ng-template>

打字稿

createFormGroup = dataItem => this.fb.group({
    '_id': new FormControl(dataItem._id),
    'roles': [new FormControl(dataItem.roles)]
  })

服务返回JSON对象

createdDate: Thu Jul 25 2019 21:48:06 GMT+0100 (British Summer Time)

{} methodAlias: "List Users" methodName: "list" methodType: "POST" moduleName: "user" roles: Array(3) 0: {_id: "5caf9fb37147ed08f3f538b3", roleName: "SuperAdmin"} 1: {_id: "5caf9fc07147ed08f3f538b7", roleName: "Admin"} 2: {_id: "5cafa9d72b4aaf0017bfef09", roleName: "Manager"} length: 3 proto: Array(0) _id: "5d3a15861f276d6560ee7f55"

Answer 1

很确定你只需要这样做：

createFormGroup = dataItem => this.fb.group({
  '_id': [dataItem._id],
  'roles': [dataItem.roles.map(r => r._id)]
})

多个 select 想要一个具有数组值的 FormControl，并且这些值需要与您绑定到选项值的值相匹配。不是一个包含单个 FormControl 的数组，使用 formbuilder 的语法看起来更像我这里的语法。它基本上是：

[key:string]: [value, validators, asyncValidators]

这可能不正确，因为我不确定 column.field 等于什么，应该是 'roles'

还收回模板中值的 2 种方式绑定，要么使用一种方式绑定，要么根本不使用它，因为你使用的是反应形式

在 Material Select 中添加数组类型值 Angular

Add Array Type value in Material Select in Angular

typescript

angular-material

kendo-ui-angular2

angular