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

基本上，当运行

addEventListener

时，我无法从正在创建的函数外部访问任何保存的变量

在下面的代码中，我总是得到一个错误，即类型“HTMLElement”上不存在属性“xAxisLabel”。

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

---

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

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

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

---

现在this.xaxislab引用了正确的值

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

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

---

现在，this.xAxisLabel引用的是正确的值

自从我使用HTML以来，已经有一段时间了。xAxisLabel不是在“窗口”上定义的，而是在HTML元素上定义的吗？您能在某个地方使用断点来验证标签属性属于哪个对象吗？我已经有一段时间没有使用HTML了。xAxisLabel不是在“窗口”上定义的，而是在HTML元素上定义的吗？您可以在某个地方使用断点来验证标签属性属于哪个对象吗？是的，非常感谢。恐怕我在那个部门的打字经验有点欠缺，太好了，谢谢。恐怕我在那个部门的打字经验有点欠缺