CODEWITHSUNDEEP
javascriptangularngmodel
Alexandrov Alexandr
Alexandrov Alexandr

Reputation: 167

How properly bind an array with ngModel in angular 4?

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>

Upvotes: 13

Views: 18159

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657288

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

Upvotes: 37

Related Questions