Добавление слушателей в Amcharts с Angular4 [дубликаты]

Question

Добавление слушателей в Amcharts с Angular4 [дубликаты]

1

Я пытаюсь достичь функциональности детализации на Amcharts Piechart в моем проекте angular4. Официальная оболочка имеет функцию добавления слушателя в объект конфигурации. Затем этот объект конфигурации передается в 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. Их учебник показывает, что это делается именно таким образом, используя javascript, но не указав, как его достичь в сценарии вроде моего. Вызов внешней функции имеет важное значение для динамического изменения тега поставщика данных в зависимости от щелчка pieslice. Обратите внимание, что внутри 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)

Благодарю!

Alexander Hayek 31 май 2017, в 09:43

Источник

Теги:

angular

javascript

listener

amcharts

1 ответ

Ещё вопросы

Darlesson · Accepted Answer · 2017-06-01T03-18-00.000Z

Вы можете установить 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();
            }
        }],
      ...
    });
  }
}