时间戳

首页 > 解决方案 > 在 Angular 的材质选择中添加数组类型值

angular - 在 Angular 的材质选择中添加数组类型值

问题描述

我正在尝试将 Array Type 绑定到 Angular Project 中的 Material Select，但它返回以下错误。

ERROR 错误：未捕获（在承诺中）：错误：值必须是多选模式下的数组。

这是我的代码，

模板

<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 对象

创建日期：2019 年 7 月 25 日星期四 21:48:06 GMT+0100（英国夏令时间）

{} methodAlias: "List Users" methodName: "list" methodType: "POST" moduleName: "user" roles: Array(3) 0: {_id: "5caf9fb37147ed08f3f538b3", roleName: "SuperAdmin"} 1: {_id: " 5caf9fc07147ed08f3f538b7”，角色名称：“管理员”} 2：{_id：“5cafa9d72b4aaf0017bfef09”，角色名称：“经理”} 长度：3 原型：数组（0）_id：“5d3a15861f276d6560ee7f55”

标签： angulartypescriptangular-materialkendo-ui-angular2

解决方案

很确定你只需要这样做：

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

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

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

这可能不正确，因为我不确定什么是column.field平等的，它应该是“角色”

还取回模板中的两种方式绑定到值，要么使用单向绑定，要么根本不使用它，因为您使用的是反应形式

推荐阅读