无法更新 addeventListener 函数中的全局变量

Question

基本上，在运行时addEventListener，我无法从我正在创建的函数外部访问任何保存的变量。

在下面的代码中我总是收到错误Property 'xAxisLabel' does not exist on type 'HTMLElement'.

xAxisLabel:string = 'xAxis';
xAxisField:HTMLElement;

filterChanged(element: HTMLElement) {
   element.addEventListener("change", function(){
      this.xAxisLabel = 'Countries';
   });
}

ngOnInit() {
   this.xAxisField=document.getElementById('xAxisField');
   this.filterChanged(this.xAxisField);
}

我确信这是一个相当简单的解决方案，但我无法在网上找到它。任何帮助，将不胜感激。

Answer 1

这是由于“this”关键字绑定造成的。您需要更改代码以使用箭头函数，因此：

 filterChanged(element: HTMLElement) {
   element.addEventListener("change", () => {
      this.xAxisLabel = 'Countries';
   });
}

现在 this.xAxisLabel 指的是正确的值