Aufruf einer TypeScript-Funktion aus einer Chart.js-Option Callback

Question

Ich verwende einen Wrapper für Chart.js, mit dem ein Animationsrückruf ermittelt werden kann, wenn das Diagramm fertig gezeichnet ist.

Also, schauen meine Chart Optionen wie folgt aus:

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

und meine chartTestMethod() sieht wie folgt aus:

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

Meine Hoffnung ist es, die Methode zu haben chartTestMethod() (die in der gleichen Typoskript-Datei) aufgerufen, wenn die Diagrammanimation abgeschlossen ist. Wenn jedoch die Animation abgeschlossen ist und dass Methodenaufruf Zeile ausgeführt wird, erhalte ich die Fehlermeldung:

TypeError: this.chartTestMethod is not a function. 

Grundsätzlich, wie kann ich diese Methode richtig nennen?

Answer 1

ich implizieren, dass Ihr chartTestMethod in derselben ist Klasse als chartOptions seit Sie es auf dieses verwenden. Sie sollten sicherstellen, dass Sie verstehen, wie diese in JavaScript behandelt wird (und TypScript ist eine Obermenge von JavaScript). Es muss eine Million Referenzen geben.

Ohne etwas zu wissen, über Chart.js, ich denke, es ist sicher, dass die in keiner Weise davon ausgehen, diese Kontext Ihrer Klasse Instanz passt, wenn onComplete aufgerufen wird. Also, was Sie wollen, ist ein Pfeil Funktion, wie folgt aus:

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

Lesen Sie mehr über Typoskript Pfeil Funktion zu verstehen, wie Sie sicherstellen, diese tatsächlich zu Ihrer Instanz zeigt.

Answer 2

Sie haben einen Fehler erhalten, weil this wenn auf das Objekt verweist, wo Funktion ausgeführt wird. In Ihrem Fall bezieht sich this auf any.animation Objekt, die nicht chartTestMethod Schlüssel haben. Sie können es abhängig davon lösen, wo chartTestMethod definiert ist. Wenn es im globalen Objekt definiert ist, können Sie einfach das Schlüsselwort this entfernen. Sie können den Code wie dieser

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

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

auch neu schreiben, wenn Sie diese Methode wollen in das gleiche Objekt zu sein, können Sie dies tun

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