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

我使用Chart.js的包装，它允许动画回调来确定图表完成绘制的时间。从Chart.js选项回调调用TypeScript函数

所以，我的图表选项是这样的：

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

和我chartTestMethod()看起来是这样的：

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

我的希望是有方法chartTestMethod()（这是在同一打字稿文件）在图表动画完成时调用。然而，在动画完成，执行该方法调用线的时候，我得到的错误：

TypeError: this.chartTestMethod is not a function.

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

来源

2016-07-14 Roka545

我暗示你chartTestMethod是在同一类chartOptions因为您正在使用此。您应该确保您了解如何在JavaScript中处理这个（并且TypeScript是JavaScript的超集）。那里必须有一百万个参考。

不知道任何有关chart.js之，我认为它是安全的假设，在没有办法的时候的onComplete调用该这方面适合您的类的实例。所以，你需要的是一个箭头的功能，如：

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

阅读有关打字稿箭头功能，了解如何确保这实际上是指向您的实例。

来源

2016-07-14 18:49:44 sgrtho

首先，它没有解决OP的问题，因为它和定义函数一样是一个对象的关键。其次，箭头功能在所有ECMAScript版本中都不可用。 – 2016-07-14 18:54:35

这个问题被标记为“typescript”，除非OP选择一个支持箭头函数的目标，它将使用闭包来模拟。无论如何，使用箭头函数“this”将指向包含chartOptions的任何实例。 – sgrtho

感谢您的投入。 sgrtho的回答对我来说非常合适。 – Roka545

由于this引用了函数正在执行的对象，所以出现错误。在你的情况下，this是指any.animation对象，它没有chartTestMethod键。您可以根据定义的chartTestMethod来解决问题。如果它是在全局对象中定义的，则可以删除this关键字。你可以重写代码这样

另外，如果你想这个方法是在同一个对象，你可以这样做

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

来源

2016-07-14 18:46:43

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

回答

相关问题