ngFor with Data binding?

Question

I've got a *ngFor where I fetch a heroes list. Now, If I change a value of hero, my heroes should be changed too, how do you do it, the best way...

     <li *ngFor="#hero of heroes">
      <input type="text" [value]="hero.name"/>
    </li>

I only know the way to make a (change)="UpdateListByItem(item)" , to call a methode, but isn't there a way to make a two way databind for all items?

score 7 · Accepted Answer · answered Jan 25 '16 at 10:31

7

You can do two way databinding using ngModel directive

<li *ngFor="#hero of heroes">
  <input type="text" [(ngModel)]="hero.name"/>
</li>

Whenever you change the input text the corresponding hero name will get changed.

answered Jan 25 '16 at 10:31

Siva

1

You can also debug the changes being reflected by adding {{heroes|json}} in the top of your template – Siva Jan 25 '16 at 10:35
What if heroes gets new elements? Should the list be updated too? – Matthias Jan 21 '19 at 13:18

score 2 · Answer 2 · answered Jan 25 '16 at 10:31

2

You could use ngModel to do this automatically

<li *ngFor="#hero of heroes">
  <input type="text" [(ngModel)]="hero.name"/>
</li>

answered Jan 25 '16 at 10:31

cexbrayat

score 1 · Answer 3 · answered Jan 25 '16 at 10:32

1

Look at this Answer. ngModel allows to change individual name and update the list immediately.

    <ul>
        <li *ngFor="#hero of heros">
            <input type="type"  [value]="hero.name"  [(ngModel)]="hero.name" />
        </li>
    </ul>

answered Jan 25 '16 at 10:32

micronyks

3 Answers3