时间戳

首页 > 解决方案 > 如何检测Angular 9中的变量变化？

javascript - 如何检测Angular 9中的变量变化？

问题描述

我需要检测任何变量何时更改值并调用任何函数。现在的功能并不重要，我只需要检测是否有任何值被更改。重要的是我需要检测每一个变化，而不仅仅是在 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); 
  }

标签： javascriptangular

解决方案

您可以使用 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);
})

确保EventEmitter从@angular/core.

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

例如：

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

之后，您将如您预期的那样得到一些结果（“事件更改”）。

推荐阅读