Angular Обнаружение изменений для изменений в объекте

Question

Я пытаюсь заставить ChangeDetection правильно работать в моем проекте.

object-group.component.ts

objectGroup: ObjectGroup[];
...

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

object-group. компонент. html

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

object.component.ts

@Input() object: ObjectGroup;

Теперь у меня вопрос, почему я не получаю информацию, когда изменить свойства внутри объекта?

Спасибо за ответы!

Answer 1

Вы не получаете информацию, потому что массивы и объекты в JavaScript хранятся по ссылке, и обнаружение изменений срабатывает только при изменении местоположения в памяти массива и объекта. Чтобы исправить это, попробуйте обновить его постоянно.

Попробуйте:

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

Answer 2

Вот как можно проверить изменения значения объекта

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