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

Question

使用 Angular 2，我试图通过为每个属性动态创建输入字段来为任意对象构建通用表单。

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

为每个属性 key 创建了一个字段，然后我想将其绑定(bind)回 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" 绑定(bind)到 keys 而不是 entity.

有什么方法可以将字段绑定(bind)到实体吗？

或者有其他方法可以更新实体的值吗？

Answer 1

在ngFor中使用index绑定(bind)实体值。

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