*ngFor how to bind each item in array to ngModel using index

Question

===final updated==

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

since I use ngModel in a form, I must add name attribue.

and my mistake is that

Answer 1

in you case sir if you are using *ngFor for loop then i don't think so you need index. why don't you just use x.Name. here is the modified code.

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

or can you try this

<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

It should be [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>