pivottable.js- невозможно получить доступ к переменным класса внутри clickCallback

Question

Я пытаюсь получить доступ к переменной класса внутри функции обратного вызова в сводной таблице, я использую угловой 5 и для сводной таблицы: nicolaskruchten / pivottable

Мой код:

declare var jQuery: any;

@Component({
  selector: 'app-dialog-commitment-pivot',
  templateUrl: '<div id="pivot"></div>',
  styleUrls: ['./dialog-commitment-pivot.component.scss']
})
export class DialogCommitmentPivotComponent implements OnInit {

  private el: ElementRef;

  constructor(
    private commitmentService: CommitmentService,
    public dialogRef: MatDialogRef<DialogCommitmentPivotComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    @Inject(ElementRef) el: ElementRef
  ) {
    this.el = el;
   }


  ngOnInit() {

        if (!this.el ||
          !this.el.nativeElement ||
          !this.el.nativeElement.children) {
          console.log('cant build without element');
          return;
        }

        var container = this.el.nativeElement;
        var inst = jQuery(container);
        var targetElement = inst.find('#pivot');

        if (!targetElement) {
          console.log('cant find the pivot element');
          return;
        }

        while (targetElement.firstChild) {
          targetElement.removeChild(targetElement.firstChild);
        }

        //render here
        targetElement.pivot(this.data.pivotData,
          {
            rows: ["status"],
            cols: ["name"],
            rendererOptions: {
              table: {
                clickCallback: function(e, value, filters, pivotData) {
                  console.log(e);
                  console.log(value);
                  console.log(filters.name);
                  console.log(pivotData);


                  this.commitmentService.getPivotDataDetails(filters.name, filters.status)
                    .subscribe(
                      res => {
                        console.log(res);
                      })
                }
              }
            }
          });
  }

Я получаю ошибку:

TypeError: Невозможно прочитать свойство 'getPivotDataDetails' из неопределенного

Я не могу получить доступ к любым переменным класса изнутри clickCallback Я не уверен, что не так.

Answer 1

Я нашел проблему. Это не было ничего общего с поворотной, на самом деле это было scope проблема. commitmentService не было видно внутри поворотного обратного вызова. Поэтому я исправил это, выполнив следующее:

1. переехать getPivotDataDetails как метод DialogCommitmentPivotComponent
2. теперь связывай getPivotDataDetails как это: clickCallback: this.getPivotDataDetails.bind(this)