I have an array of objects (arr). In one of my component's inputs, in the (change) method, I modify the attribute of one of the objects but in the view (*ngFor) nothing changes. I read that Angular’s change detection doesn't check the contents of arrays or objects, so I’ve tried these:
this.arr = this.arr.slice();
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’ve 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;
}