如何将动态创建的表单字段绑定到Angular 2中的对象？

Question

我正在尝试使用Angular 2通过为每个属性动态创建输入字段为任意对象构建通用形式。

给定一个对象entity我使用管道获取属性数组，遍历每个属性。

为每个属性key创建一个字段，然后将其绑定回该entity 。

这是代码：

<tr *ngFor="let key of entity | keys">
  <td><label for="{{key.key}}">{{key.key}}</label></td>
  <td><input id="{{key.key}}" type="text" [(ngModel)]="key.value"></td>
</tr>

因此，问题在于这些字段是使用[(ngModel)]="key.value"绑定到keys而不是entity 。

有什么方法可以将字段绑定到entity吗？

还是有另一种方法来更新实体上的值？

Answer 1

在ngFor使用index来绑定实体值。

<tr *ngFor="let key of entity | keys;let i = index">
  <td><label for="{{key.key}}">{{key.key}}</label></td>
  <td><input id="{{key.key}}" type="text" [(ngModel)]="entity[i].value"></td>
</tr>