时间戳

首页 > 解决方案 > 错误类型错误：无法读取未定义的属性“调用”

angular - 错误类型错误：无法读取未定义的属性“调用”

问题描述

我终于开始在我的 Angular 9 项目中使用 nouislider 了。我现在的问题是我想在滑块值更改时更新一个字段（所以当用户移动滑块时，我想在屏幕上显示新值）。事件有问题，我不确定是什么问题。

noUiSlider.create(this.theHtmlElement, {
  start: [3000],
  step: 1,
  connect: [true, false],
  range: {
      'min': [0],
      'max': [10000]
  }
});

this.theHtmlElement.noUiSlider.on('update', this.valueChanged());


...
valueChanged() {
console.log(this.theHtmlElement.noUiSlider.get());

}

我得到的错误是：

ERROR TypeError: Cannot read property 'call' of undefined
at nouislider.js:2082
at Array.forEach (<anonymous>)
at nouislider.js:2081
at Array.forEach (<anonymous>)
at fireEvent (nouislider.js:2077)
at nouislider.js:2055
at Array.forEach (<anonymous>)
at Object.bindEvent [as on] (nouislider.js:2054)
at AddCreditPageComponent.ngAfterViewInit (add-credit-page.component.ts:65)
at callProviderLifecycles (core.js:33986)

该事件似乎第一次起作用，我在控制台中看到了初始值，但随后出现了错误！然后没有其他工作。我走过，似乎有第二个未定义的范围事件或什么的！不确定它是什么以及它来自哪里，这可能是导致问题的原因。我不知道如何解决它。

标签： angularangular9nouislider

解决方案

要绑定事件，您必须传入一个匿名函数（以​​及其他可能性）；

this.theHtmlElement.noUiSlider.on('update', () => this.valueChanged());

或者

this.theHtmlElement.noUiSlider.on('update', this.valueChanged.bind(this));

或者

this.theHtmlElement.noUiSlider.on('update', this.valueChanged);

readonly valueChanged = () => {
  console.log(this.theHtmlElement.noUiSlider.get());
};

你是如何做到的，它会立即执行该this.valueChanged()方法，该方法返回undefined. 然后它尝试将此绑定undefined到update事件处理程序，这将导致您看到的错误

推荐阅读