角度:ngModel 错误，因为我使用的是数组

Question

我有下一个问题：

我有这个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>

类。数据是我编写的第一个json类。

我收到下一个错误：

core.js：7187 错误：找不到类型为"对象"的不同支持对象"[对象对象]"。NgFor 仅支持绑定到可迭代对象(如数组(。

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

感谢

Answer 1

试试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

堆栈闪电战：https://stackblitz.com/edit/angular-gf7yas

如果从最后两个示例中删除键值管道，以便尝试遍历对象和映射，则会收到错误：

错误：找不到不同的支持对象"[对象对象]"的 键入"对象"。NgFor 仅支持绑定到可迭代对象，例如 阵 列。

Answer 2

我不确定您的最终模板是什么，但我认为您甚至不需要第二个ngFor。使用两个ngFor，您最终将总共获得四个输入，而您只有两个参数。我猜你只需要两个输入，一个用于id，一个用于value。

如果这是您的要求，请尝试此操作

<div *ngFor="let col of row.data" class="col-{{col.ColType}}-{{col.Col}}" [ngSwitch]="col.Type" style="width: 100% !important">
<mat-form-field>
<input matInput [(ngModel)]="classe.Data[col.Field.toLowerCase()]" [name]="col.Field.toLowerCase()" >
</mat-form-field>
</div>

Answer 3

我发现的一个好方法是使用事件：

在我写的组件中：

onKey = (field: string, ev) => {
this.classe.Data[field.toLowerCase()] = ev.target.value;
}

模板将是：

<mat-form-field> 
<mat-label>{{col.Translate | translate}}</mat-label>                                              
<input matInput 
(keyup)="onKey(col.Field.toLowerCase(), $event)" 
[name]="col.Field.toLowerCase()" 
[value]="classe.Data[col.Field.toLowerCase()]">
</mat-form-field> 

这对我来说是一个解决方案。我很想使用ngModel，但是...