angular - *ngFor 如何使用索引将数组中的每个项目绑定(bind)到 ngModel

Question

===最终更新==

http://plnkr.co/edit/WKRBB7?p=preview

因为我在表单中使用 ngModel，所以我必须添加 name 属性。

我的错误是我使用了与其名称相同的值。

<form #myform="ngForm">
    <table>
      <tr *ngFor="let staff of staffs">
         <td><input name="name" [(ngModel)]="staff.name">{{staff.name}}</td>
      </tr>
    </table>
</form>

我改成下面的后，我的问题就解决了。

<form #my2form="ngForm">
   <table>
      <tr *ngFor="let staff of staffs;let i = index">
         <td><input name="staff.{{i}}.name" [(ngModel)]="staff.name">{{staff.name}}</td>
      </tr>
    </table>
</form>

==========

抱歉，我不记得为什么我使用 names[$index].Name 而不是 x.Name。

也许几年前我在使用 x.Name 时遇到了一些错误，然后养成了使用索引的习惯。

---已更新-----

我需要一个内联编辑表，双向绑定(bind)。

<table>
   <tr *ngFor="let x of names">
     <td><input [(ngModel)]="x.Name">{{x.Name}}</td>
   </tr>
</table>

let names = [
{ Name:'jim'},
{ Name:'tom'}
];

最初页面显示:

blank text field; jim

blank text field; tom

在第一个文本字段中输入“aaaaaa”后，它变成:

aaaaaa; aaaaaa

blank text field; tom

我认为该页面最初会显示:

jim; jim
tom; tom

所以，我的问题是，为什么缺少初始值？

Answer 1

应该是[ngModel]="..."

<table>
   <tr *ngFor="let x of names;let i = index;">
     <td>{{ i+ 1 }}</td>
     <td><input [(ngModel)]="names[i].Name">{{x.Name}}</td>
   </tr>
</table>