angular10：如何在数组更改中检测复杂输入 object

Question

我有一个数组，我使用 DoCheck 和 IterableDiffer 来监听我的代码中的变化。 当数组更改时，但当数组中的一个对象内的属性更改时，我不会收到通知。 我尝试对数组types中的每个 object 使用 KeyValueDiffer ，但它在ngDoCheck中不起作用。 有任何想法吗？

在父级中：

<comp [types]="types"></comp>

readonly: boolean =  false;

types: {
  readonly: boolean;
  title: string;
  value: any;
}[] = [{
  title: 'title1',
  readonly: this.readonly,
  value: 1
}, {
  title: 'title2',
  readonly: this.readonly,
  value: 2
}];

ngOnInit() {
    setTimeout(() => {
      this.readonly = true;
    }, 5000)
}

在组件comp中：

constructor(
    private differsService: KeyValueDiffers
) {};

@Input types: any[] = [];

ngOnInit() {
    this.differ = this.searchTypes.reduce((t, c, i) => {
      t[`types_${i}`] = this.differsService.find(c).create();
      return t;
    }, {});
}

ngDoCheck(): void {
    if (this.differ) {
      Object.keys(this.differ).map((key: string) => {
        const k = key.split('_');
        const state = k.length === 1?this[k[0]]:this[k[0]][k[1]];
        const changes = this.differ[key].diff(state);
        if (changes) {
          console.log(key, changes);
        }
      })
    }  
}

Answer 1

在 Angular 中，更改检测在分配时触发。 这意味着您需要为绑定的变量或对象分配新值以触发更改检测。 因此，而不是仅更改对象的属性。 之后尝试重新分配数组以触发检测：

types = [...types];

在更新类型数组中的值时尝试在父组件中分配它

<comp [types]="types"></comp>

本文可能会帮助您理解该概念： https://www.digitalocean.com/community/tutorials/angular-change-detection-strategy

Answer 2

首先要指出的是，这种变化检测可能会不必要地昂贵和复杂。 我建议阅读 RxJS 以及它如何处理数据变化。

但是，在您的具体示例中，问题不在于您的密钥不同，而在于您如何处理readonly的逻辑

在 javascript 中，原语（例如布尔值）不是通过引用传递，而是通过值传递。

这意味着当您设置以下内容时：

readonly: this.readonly

readonly type中的值设置为 false，仅此而已。 如果稍后您更改this.readonly ，则type中的值不会更改。 如果要保持两个“实时”之间的连接，则需要通过引用传递，例如 object。 就像是

this.readonly = { status: false }

然后当你这样做

this.readonly.status = true

该值也将在types中更改。

这是一个 stackblitz 演示它的实际操作（并且不需要 keydiffers）：

https://stackblitz.com/edit/angular-ivy-d8gige?file=src/app/app.component.ts