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 属于同一类，因为您在此上使用它。您应该确保了解如何在JavaScript中处理此（并且TypeScript是JavaScript的超集）。那里必须有一百万个参考文献。

在不了解 Chart.js 的情况下，我认为可以安全地假设此上下文在 onComplete 被调用。所以你想要的是箭头功能，如下所示：

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

了解TypeScript箭头功能，了解如何确保此实际指向您的实例。

Answer 2

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

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

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

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

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

Answer 3

you can use bind(this) 

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

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

3 个答案: