如何將動態創建的表單字段綁定到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>