Angular2: *ngFor does not update when array is updated

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

Since you mentioned that you already tried markForCheck(), you should try detectChanges instead (that just what worked for me and markForCheck did not work). For those that need the steps:

Add ChangeDetectorRef to your imports:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

Add ChangeDetectorRef to your constructor:

constructor(    private changeDetection: ChangeDetectorRef  ) { }

Then on the next line after you update the array:

this.changeDetection.detectChanges();

late to the game but creating a deep clone using lodash worked for me

this.arr = cloneDeep(this.arr);

https://lodash.com/docs/4.17.15#cloneDeep