Angular2: *ngFor does not update when array is updated

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

1. Check if your component is configured with changeDetection:cHangeDetectionStrategy.OnPush, if you are going this then after updation of array you have to call changeDetectorRef.markForCheck()
2. You can also implement onChange lifecycle hook and change values of array inside this function.

I solved this error by adding a changDetection directive on @component as follows

    @Component({
      selector: 'app-page',
      templateUrl: './page.component.html',
      styleUrls: ['./page.component.scss'],
      changeDetection: ChangeDetectionStrategy.Default
    })

You also need to import it

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

There are two strategies onPush and Default

The onPush uses the CheckOnce strategy, meaning that automatic change detection is deactivated until reactivated by setting the strategy to Default (CheckAlways). Change detection can still be explictly invoked.

while the Default uses the CheckAlways strategy, in which change detection is automatic until explicitly deactivated.

Source Docs

I was able update the component using ngZone

export class comp {
  arr: type[] = []
  
  constructor (
    private zone: NgZone
  ) {}

  updateArr(data: type) {
     this.arr.push(this.zone.run(() => data))
  }

}

Incase anyone else runs into my situation, make sure that the component that is updating is the same copy as the one being rendered.

I was using @ViewChild(MyComponent, { static: true }) private test: MyComponent to pass data to the component with the ngfor. (In my case that ended up locking onto another copy I didn't know about)

I was able to fix it by adding the attribute #mycomp to my component tag in the html and changing the above to @ViewChild('mycomp', { static: true }) private test: MyComponent

If you reassign an array the change detection won't notice the change. So instead of reassigning an array like this.arr = ... change the array directly. This could look like this:

this.arr.splice(0); // empty the array, without reassigning it
this.arr.push(...); // push new items

That way you don't need to call the change detection manually.

Example

Let's say a have a list for a table which can be filtered (the user can i.e. search). So I will have a list which contains all possible items, and a filteredList which is used in the UI and shown to the user.

// in ngOnInit I load the full list
this.list = this.myService.getList();
this.filteredList = [...this.list] // Since I will change the filtered list directly instead of reassigning it, I need to make a copy to not affect the original full list.

// then in a filter function, i.e. filterList()
this.filteredList.splice(0);
this.filteredList.push([...this.list.filter(/* ... */)]); // Again I need to push copies

Try creating a deep copy by doing

this.arr = Object.assign({}, NEW_VALUE);

Any time I need to deal with *ngFor that needs change detection I prefer using behaviorSubject and async pipe. (I know this is a longer solution. Using behavior subject makes it easy to work with change detection)

array$ = new BehaviorSubject([]);//Declare your array

When you need to update your array

array$.next(newArray)://Pass in new array data

if you want to read your array value in the .ts file use this

array$.getValue()

in your .HTML file

*ngFor='let obj of (array$ | async)'