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

I'm using a wrapper for Chart.js which allows for an animation callback to determine when the chart is done drawing.

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

So, my chart options look like this:

所以,我的图表选项如下所示:

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

and my chartTestMethod() looks like this:

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

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

My hope is to have the method chartTestMethod() (which is in the same TypeScript file) called when the chart animation is complete. However, when the animation is complete and that method call line is executed, I get the error:

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

TypeError: this.chartTestMethod is not a function.

Basically, how can I call that method properly?

基本上,我该如何正确地调用该方法?

2 个解决方案

#1

I imply that your chartTestMethod is in the same class as chartOptions since you're using it on this. You should make sure you understand how this is handled in JavaScript (and TypeScript being a superset of JavaScript). There must be a million references out there.

我暗示你的chartTestMethod与chartOptions在同一个类中,因为你在这上面使用它。您应该确保了解如何在JavaScript中处理它(并且TypeScript是JavaScript的超集)。那里必须有一百万个参考文献。

Without knowing anything about Chart.js, I think it is safe to assume that in no way the this context fits your class instance when onComplete is invoked. So what you want is an arrow function, like this:

在不了解Chart.js的情况下,我认为可以安全地假设在调用onComplete时,此上下文绝不适合您的类实例。所以你想要的是一个箭头功能,如下所示:

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

Read about TypeScript arrow function to understand how to make sure this is actually pointing to your instance.

阅读有关TypeScript箭头函数的信息,了解如何确保它实际指向您的实例。

#2

You got an error because this if referring to the object where function is executing. In your case, this is referring to any.animation object which do not have chartTestMethod key. You can solve it depending on where chartTestMethod is defined. If it is defined in global object, you can just remove this keyword. You can rewrite your code like this

你有一个错误,因为这是指引用函数执行的对象。在您的情况下,这是指没有chartTestMethod键的any.animation对象。您可以根据chartTestMethod的定义位置来解决它。如果在全局对象中定义,则只需删除此关键字即可。您可以像这样重写代码

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

any = {
    animation: {
        duration: 2000,
        onComplete: function (){
            chartTestMethod();
        }
    },
    responsive: true
};

Also, if you want this method to be in the same object, you can do this

此外,如果您希望此方法位于同一对象中,则可以执行此操作

any = {
    animation: {
        duration: 2000,
        onComplete: function (){
            this.chartTestMethod();
        },
        chartTestMethod: function(){
            console.log('chartTestMethod called.');
      }
    },
    responsive: true
};

#1