javascript - 从 Chart.js 选项回调调用 TypeScript 函数

Question

我正在使用 Chart.js 的包装器，它允许动画回调来确定图表何时完成绘制。

因此，我的图表选项如下所示:

public chartOptions: any = {
    animation: {
        duration: 2000,
        onComplete: function () {
            //alert('anim complete');
            this.chartTestMethod();
        }
    },
    responsive: true
};

我的 chartTestMethod() 看起来像这样:

chartTestMethod() {
     console.log('chartTestMethod called.');
}

我希望在图表动画完成时调用方法 chartTestMethod()(在同一个 TypeScript 文件中)。但是，当动画完成并执行该方法调用行时，我收到错误:

TypeError: this.chartTestMethod is not a function. 

基本上，我怎样才能正确调用该方法？

Answer 1

我的意思是您的chartTestMethod 与chartOptions 属于同一个类，因为您在this 上使用它。您应该确保了解 this 在 JavaScript 中的处理方式(TypeScript 是 JavaScript 的超集)。那里一定有一百万个引用资料。

在对 Chart.js 一无所知的情况下，我认为可以安全地假设 this 上下文在 onComplete 被调用。所以你想要的是一个箭头函数，像这样:

onComplete: () => { this.chartTestMethod(); }

阅读 TypeScript 箭头函数以了解如何确保 this 实际上指向您的实例。