Angular (8) why is the template not updating?

Question

JavaScript

I have a component, it has a sensors property: Array
There is a line in the template

<div class="pr-sensors-item" *ngFor="let item of sensors">

The problem is that when I try to set new elements of the array, the template is not updated
, and this only happens if I change the array from the callback function after the Http Request
, i.e.:

getSensors() {
this.sensors = [{}, {}] // так работет и шаблон рендерится
this.sensorsService
      .get(this.machineParentId)
      .subscribe((response) => {
            this.sensors = response.sensors // так не работает
            // or
            this.sensors.push(...response.sensors)
      });
}

Answer 1

Do you happen to have a component in it changeDetection: ChangeDetectionStrategy.OnPush?
Angular detects changes in inputs by reference when OnPush. When you create a new list with
this.sensors = [{}, {}], you refer to the new list, and when you change the value through this.sensors.pushthe object reference does not change.
So either use the spread operator

this.sensors = [...this.sesnsors, ...response.sensors]

Or manually tell Angular to check for change via this.changeDetector.markForCheck()
(changeDetector from constructor, private changeDetector: ChangeDetectorRef)

Answer 2

*ngFor="let item of sensors$ | async;"

sensors$ = this.sensorsService.get(this.machineParentId);