*如何使用索引将数组中的每个项绑定到ngModel

Question

==最终更新==

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

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

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

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

==========

对不起，我不记得为什么使用名称[$index]。名称而不是x。名字。

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

---更新-----

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

<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

在你的情况下，先生，如果你使用*ngFor作为循环，那么我不认为你需要索引。这是修改后的代码。

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

或者你能试试这个吗

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

Answer 2

它应该是[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>