如何检测Angular 9中的变量变化

Question

我需要检测任何变量何时更改值并调用任何函数。函数现在并不重要，我只需要检测是否有任何值发生了更改。重要的是，我需要检测每一个变化，不仅仅是在init上。

dagAndDropUser: any;

onAdd(e) { 
console.log(' add     ', e.itemData)
this.dagAndDropUser = e.itemData; // EVERY ADD VARIABLE CHANGE VALUES I NEED TO DETECT IT
e.toData.splice(e.toIndex, 0, e.itemData); 
}

Answer 1

您可以使用EventEmitter。例如：

dagAndDropUser: any;
dagAndDropUserValueChanges: EventEmitter<any> = new EventEmitter();
onAdd(e) { 
console.log(' add     ', e.itemData)
this.dagAndDropUser = e.itemData; // EVERY ADD VARIABLE CHANGE VALUES I NEED TO DETECT IT
e.toData.splice(e.toIndex, 0, e.itemData);
this.dagAndDropUserValueChanges.emit(e.itemData); 
}

现在，如果你想检测值的变化，你可以使用：

this.dagAndDropUserValueChanges.subscribe(itemData => {
console.log('Value Changes: ', itemData);
})

请确保从@angular/core导入EventEmitter。

更新：如果您遇到一些错误，请确保将onAdd方法更改为arrow函数方法，现在您就可以使用应用程序组件的实例了。

例如：

onAdd = (e) => { 
console.log(' add     ', e.itemData)
this.dagAndDropUser = e.itemData; // EVERY ADD VARIABLE CHANGE VALUES I NEED TO DETECT IT
e.toData.splice(e.toIndex, 0, e.itemData);
this.dagAndDropUserValueChanges.emit(e.itemData); 
}

之后，您将得到一些您所期望的结果("事件更改"(。