0

我在 ngDoCheck 的帮助下监听对象属性的变化实现如下

differ: any;
pageSettings:SelectionSettings;

选择设置在哪里

export interface SelectionSettings {
  boolPpt: boolean;
  maxRows: number;
  startIndex:number;
  valuesToSelect: Colum[];  
}

属性 valuesToSelect 是一个项目数组，本质上是动态的。[项目可以添加到从列表中删除以及项目可以更新]

ngDoCheck 初始化如下

  constructor(  private differs: KeyValueDiffers) {
    this.differ = differs.find({}).create();  
    this.initializeSettings();
  }


  ngDoCheck() {
    var changes = this.differ.diff(this.pageSettings);
    if (changes) {
      console.log('changes detected');
      changes.forEachChangedItem(r => console.log('changed ', r.currentValue));
      changes.forEachAddedItem(r => console.log('added ' + r.currentValue));
      changes.forEachRemovedItem(r => console.log('removed ' + r.currentValue));
    } else {
      console.log('nothing changed');
    }
  }
  


initializeSettings() {

this.pageSettings = {
  boolPpt: false,
  maxRows: 100,
  startIndex: -1,      
  valuesToSelect: [
    {
      name: "sadsa",
      index: -1,
      type: "string",
      bgcolor:"#0000CD"
    },
    {
     name: "xxzc",
      index: -1,
      type: "string",
      bgcolor:"#1000CD"
    }        
  ]
}

}

pageSettings 的更新发生在组件内部的不同位置，例如表格单元格的单击事件或复选框更改事件等

这会触发除数组 valuesToSelect 之外的所有属性更改。每当我添加新项目或删除属性 SelectionSettings.valuesToSelect 的项目时，都会检测到更改。但是如果我们更新 SelectionSettings.valuesToSelect 中的现有项目，ngDoCheck 不会检测到任何更改。

如何检测或监听 SelectionSettings 的所有属性以及子数组属性的变化

4

0 回答 0