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

我试图访问数据透视表中回调函数内的类变量，我使用的是angular 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);
                      })
                }
              }
            }
          });
  }

声明var jQuery:any；
@组成部分({
选择器：“应用程序对话框承诺轴”，
templateUrl:“”，
样式URL:['./对话框承诺透视图.component.scss']
})
导出类DialogCommitmentPivotComponent实现OnInit{
私人el:ElementRef；
建造师(
私人委托服务：委托服务，
公共dialogRef:MatDialogRef，
@注入（MAT_DIALOG_DATA）公共数据：任意，
@注入（ElementRef）el:ElementRef
) {
this.el=el；
}
恩戈尼尼特（）{
如果（！this.el||
！这是国家元素||
！this.el.nativeElement.children）{
log（'cannotbuildwithelement'）；
返回；
}
var container=this.el.nativeElement；
var inst=jQuery（容器）；
var targetElement=inst.find（“#pivot”）；
如果（！targetElement）{
log（'找不到透视元素'）；
返回；
}
while（targetElement.firstChild）{
targetElement.removeChild（targetElement.firstChild）；
}
//在这里渲染
targetElement.pivot（this.data.pivotData，
{
行：[“状态”]，
cols:[“名称”]，
渲染器选项：{
表:{
单击回调：函数（e、值、筛选器、数据透视）{
控制台日志（e）；
console.log（值）；
console.log（filters.name）；
console.log（数据透视）；
this.CommissionService.getPivotDataDetails（filters.name、filters.status）
.订阅(
res=>{
控制台日志（res）；
})
}
}
}
});
}

我得到一个错误：

TypeError:无法读取未定义的属性“getPivotDataDetails”

我无法从clickCallback内部访问任何类变量

---

我不确定出了什么问题。

我发现了问题。这与数据透视表无关，实际上是

范围问题。
提交服务在数据透视表回调中不可见。因此我通过执行以下操作修复了问题：

移动
getPivotDataDetails
作为
对话框CommitmentPivotComponent
现在像这样绑定
getPivotDataDetails
：单击回调：this.getPivotDataDetails.bind（this）