Angular4でAmchartsにリスナーを追加

Question

私はangular4プロジェクトのAmcharts Piechartでドリルダウン機能を実現しようとしています。 official wrapperには、構成オブジェクトにリスナーを追加する機能があります。次に、この構成オブジェクトをAmChartsServiceに渡してグラフを作成します。

私の問題はここにある：

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 
       } 
     }], 
     ... 
    }); 
    } 
} 

私はjavascript関数の範囲外のメソッドを呼び出すことはできませんしています。彼らのtutorialは、javascriptを使用してこの正確な方法で行われていますが、私のようなシナリオでそれを達成する方法は示していません。外部関数を呼び出すことは、クリックされたピーススライスに応じてデータプロバイダタグを動的に変更することが不可欠です。 javascript関数の中で、console.log（）を呼び出すことができます（スコープ外の関数ではない）。以下は

ブラウザのコンソール上に表示されるエラーです：

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) 

ありがとう！

Answer 1

thisを変数に設定し、後で参照することができます。

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(); 
      } 
     }], 
     ... 
    }); 
    } 
}