How properly bind an array with ngModel in angular 4?

Question

Let's suppose I have an array [1,2,3]. I want to iterate all items and bind each to ngModel. When I run this code after changing the first element, the second one is getting the same value. What's the problem?

<div *ngFor="let x of array; let i = index;">
    <input type="number" [(ngModel)]="x[i]">
</div>

Just do [(ngModel)]="x" should work

Fredrik Lundin Grande
– Fredrik Lundin Grande

2017-10-28 15:46:43 +00:00
Commented Oct 28, 2017 at 15:46 — Fredrik Lundin Grande
– Fredrik Lundin Grande, Commented Oct 28, 2017 at 15:46
stackoverflow.com/questions/40863074/…

Günter Zöchbauer
– Günter Zöchbauer

2017-10-28 15:47:06 +00:00
Commented Oct 28, 2017 at 15:47 — Günter Zöchbauer
– Günter Zöchbauer, Commented Oct 28, 2017 at 15:47

Vishnudev Krishnadas · Accepted Answer · 2020-01-09 14:10:02Z

38

ngFor by default uses object identity to compare values, this breaks when primitive values (number, string, boolean) are used, because they change identity when modified). Using trackBy allows to configure ngFor to zse the index instead of identity:

<div *ngFor="let x of array; let i = index;trackBy:trackByIdx">
    <input type="number" [(ngModel)]="array[i]">
</div>

trackByIdx(index: number, obj: any): any {
  return index;
}

edited Jan 9, 2020 at 14:10

Vishnudev Krishnadas

11k2 gold badges29 silver badges58 bronze badges

answered Oct 28, 2017 at 15:49

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gurnard Over a year ago

wow fantastic this took me ages. I had an input field, in a component, that lost focus on every key press. This fixed it. Simple array of strings as you state works fine if using array of objects and referencing keys in object.

manfall19 Over a year ago

This fixed it for me too! thanks!

Collectives™ on Stack Overflow

How properly bind an array with ngModel in angular 4?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related