对象变化的角度变化检测

Question

I am trying to get ChangeDetection working properly in my Project.

object-group.component.ts

objectGroup: ObjectGroup[];
...

doSomething() {
  objectGroup.forEach(item => {
    item.color = "new color";
  });
}

object-group.component.html

<object-component *ngFor="let group of objectGroup"
    [object]="group">
</object-component>

object.component.ts

@Input() object: ObjectGroup;

My question now is, why I am not getting informed, when changing properties inside an object?

Thank you for answers!

Answer 1

Here how you can check the object value changes

import { Component, DoCheck, KeyValueDiffers, HostListener } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements DoCheck {
  differ: any;
  objectGroup = []

  constructor(private differs: KeyValueDiffers) {
    this.objectGroup.forEach(item => {
      item.color = "new color";
    });
    this.differ = this.differs.find({}).create();
  } 
  ngDoCheck() {
    const change = this.differ.diff(this);
    if (change) {
      change.forEachChangedItem(item => {
        console.log('item changed', item);
      });
    }
  }
}

Answer 2

You are not getting informed because arrays and objects in JavaScript are held by reference and change detection will only kick in when the location in memory of the array and object changes. So to fix it, try to update it immutably.

Try:

objectGroup: ObjectGroup[];
...
doSomething() {
  // we change the location of `this.objectGroup` in memory by map and we change the
  // the location of each object in the array with the spread (...) and just changing
  // one property.
  this.objectGroup = this.objectGroup.map(item => ({...item, color: 'new color'}));
}

=============================== Edit ======================
// to change the location in memory of an object
this.obj = { ...this.obj };
// you can also change the object and change some of its properties
this.obj = { ...this.obj, prop1: 'new prop1 value' };