时间戳

首页 > 解决方案 > Angular：ngModel 错误，因为我使用的是数组

angular - Angular：ngModel 错误，因为我使用的是数组

问题描述

我在angular有下一个问题：

我有这个json作为实体：

{
    "id": 1,
    "value": "I am ok"
}

我有自己的json模型，例如：

[{
   "Field": "id",
   "ReadOnly": true,
   "BackColor": "silver",
   "Type": "Text"
},{
   "Field": "value",
   "ReadOnly": true,
   "BackColor": "silver",
   "Type": "Text"
}]

一旦我在订阅中获得正确的信息（我向您展示的第一个 json），我正在组件的模板中制作一个模型循环来配置对话框，并且我正在使用matInput来显示值。

好的，我正在尝试构建类似的东西：

<div *ngFor="let col of row.data" class="col-{{col.ColType}}-{{col.Col}}"  [ngSwitch]="col.Type" style="width: 100% !important">

</div>

row.data 是将模型的每个列转换为数组。

在 div 里面，我正在做类似的事情：

<mat-form-field *ngFor="let data of classe.Data"> 
    <input matInput [(ngModel)]="data[col.Field.toLowerCase()]" [name]="col.Field.toLowerCase()" >
</mat-form-field>

classe.Data 是我写的第一个json的类。

我收到下一个错误：

core.js:7187 错误错误：找不到“对象”类型的不同支持对象“[对象对象]”。NgFor 仅支持绑定到 Iterables，例如 Arrays。

我还有其他方法可以避免此错误吗？我想使用 ngModel 但如果不可能，我愿意使用其他方式。

谢谢

标签： angular

解决方案

试用 Angular 的 KeyValuePipe ( https://angular.io/api/common/KeyValuePipe )。它将对象或映射转换为键值对数组，如果您没有数组，您可以将其与 ngFor 一起使用。

这是一个如何迭代数组、映射和对象的属性的示例。

零件：

...
export class AppComponent  {
  name = 'Angular';

  arr:string[] =["foo", "bar"];
  map = new Map([[2, 'foo'], [1, 'bar']]);
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
}

模板：

<h2>Iterate array</h2>
    <div *ngFor="let item of arr | keyvalue">
      {{item.key}}:{{item.value}}
    </div>

<h2>Iterate through a map</h2>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>

<h2>Iterate over object properties</h2>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>

输出：

Iterate array
0:foo
1:bar

Iterate through a map
1:bar
2:foo

Iterate over object properties
1:bar
2:foo

Stackblitz： https ://stackblitz.com/edit/angular-gf7yas

如果您从最后两个示例中删除键值管道，然后尝试迭代对象和映射，您将收到错误：

错误：找不到“object”类型的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables，例如 Arrays。

推荐阅读