Hinzufügen von Zuhörern zu Amcharts mit Angular4

Question

Ich versuche eine Drilldown-Funktion für ein Amcharts-Piechart in meinem angular4-Projekt zu erreichen. Die official wrapper verfügt über eine Funktion zum Hinzufügen eines Listeners im Konfigurationsobjekt. Dieses Konfigurationsobjekt wird dann an AmChartsService übergeben, um das Diagramm zu erstellen.

Mein Problem ist hier:

import { AmChartsService } from "@amcharts/amcharts3-angular"; 

@Component({ 
    template: `<div id="chartdiv" [style.width.%]="100" [style.height.px]="500"></div>` 
}) 
export class AppComponent { 
    private chart: any; 

    constructor(private AmCharts: AmChartsService) {} 

    public whatever(){} 

    ngOnInit() { 
    this.chart = this.AmCharts.makeChart("chartdiv", { 
     "type": "pie", 
     "theme": "light", 
     "dataProvider": [], 
     "listeners": [{ 
       event: 'clickSlice', 
       method: function(event) { 
        this.whatever()<--- HERE 
       } 
     }], 
     ... 
    }); 
    } 
} 

Ich bin ein Verfahren außerhalb des Anwendungsbereichs der Javascript-Funktion aufrufen nicht in der Lage. Ihre tutorial zeigt, dass es auf diese Art und Weise mit Javascript gemacht wird, aber keine Hinweise darauf, wie man es in einem Szenario wie meinem erreicht. Das Aufrufen einer externen Funktion ist wichtig, um das Datenprovider-Tag abhängig von der angeklickten Pieslice dynamisch zu ändern. Beachten Sie, dass ich in der JavaScript-Funktion console.log() aufrufen kann (funktioniert einfach nicht außerhalb des Bereichs).

Unten ist der Fehler, die auf den Browser-Konsole angezeigt werden:

zone.js:169 Uncaught TypeError: Cannot read property 'Call' of undefined 
    at breakdown-chart.component.ts:51 
    at b.a.inherits.b.fire (amcharts.js:3) 
    at b.clickSlice (pie.js:10) 
    at SVGGElement.<anonymous> (pie.js:5) 
    at SVGGElement.wrapFn [as __zone_symbol___onmouseup] (zone.js:1199) 
    at ZoneDelegate.webpackJsonp.695.ZoneDelegate.invokeTask (zone.js:398) 
    at Zone.webpackJsonp.695.Zone.runTask (zone.js:165) 
    at SVGGElement.ZoneTask.invoke (zone.js:460) 

Dank!

Answer 1

Sie können this auf eine Variable setzen und später darauf verweisen.

import { AmChartsService } from "@amcharts/amcharts3-angular"; 

@Component({ 
    template: `<div id="chartdiv" [style.width.%]="100" [style.height.px]="500"></div>` 
}) 
export class AppComponent { 
    private chart: any; 

    constructor(private AmCharts: AmChartsService) {} 

    public whatever(){} 

    ngOnInit() { 
    // Set this to that 
    let that = this; 

    this.chart = this.AmCharts.makeChart("chartdiv", { 
     "type": "pie", 
     "theme": "light", 
     "dataProvider": [], 
     "listeners": [{ 
      event: 'clickSlice', 
      method: function(event) { 
       // Use that to refer to this 
       that.whatever(); 
      } 
     }], 
     ... 
    }); 
    } 
}