I have an array of objects (let's call it arr
). In one of my component's inputs in the (change)
method I modify one of these object's attribute, but in the view (*ngFor
) nothing changes. I read that Angular2 change detection doesn't check the contents of arrays or object, so I tried these:
this.arr = this.arr.slice();
and
this.arr = [...this.arr];
But the view doesn't change, it still shows the old attribute. In the (change)
method with console.log()
I got the correct array. Weird, but this one works: this.arr = [];
I tried NgZone
and markForCheck()
too.
You could also use the trackBy
option in your *ngFor
expression, providing a unique ID for every item inside the array. This does make you 100% responsible for change detection, so update this (unique) property every time the item in the array changes. Angular will then only re-render the list if any item inside your array has been given a different trackBy
property:
*ngFor="let item of (itemList$ | async); trackBy: trackItem"
or:
*ngFor="let item of itemList; trackBy: trackItem"
where:
trackItem
is a public method in your component:
public trackItem (index: number, item: Item) {
return item.trackId;
}