*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 I used same value as its name.

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

after I change to belows, my problem is resolved.

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

==========

sorry, I can't remember why I use names[$index].Name instead of x.Name.

maybe years ago I meet some mistake using x.Name, and then made a habit of using index.

---updated-----

I need a inline edit table, two-way binding.

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

initially the pages shows:

blank text field; jim  blank text field; tom 

after I type 'aaaaaa' in the first text field, it becomes:

aaaaaa; aaaaaa  blank text field; tom 

I think the page initially would show:

jim; jim tom; tom 

so, my problem exactly is, why the initial value is missing?

Answer 1

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> 

Answer 2

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>