pivottable.js- 无法访问 clickCallback 中的 class 变量

Question

我正在尝试访问枢轴 table 回调函数内的 class 变量，我正在使用 angular 5 和枢轴table: 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: Cannot read property 'getPivotDataDetails' of undefined

我无法从 clickCallback 内部访问任何 class 变量我不确定哪里出了问题。

Answer 1

我发现了问题。这与数据透视表无关，实际上是 scope 问题。 commitmentService 在数据透视表回调中不可见。所以我通过执行以下操作修复了它：

移动 getPivotDataDetails 作为 DialogCommitmentPivotComponent
现在像这样绑定 getPivotDataDetails：clickCallback: this.getPivotDataDetails.bind(this)

pivottable.js- 无法访问 clickCallback 中的 class 变量

pivottable.js- Unable to access class variables inside clickCallback

angular

callback

pivottable.js