angular - pivottable.js - 无法访问 clickCallback 中的类变量
问题描述
我正在尝试访问数据透视表中回调函数内的类变量,我正在使用角度 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 内部访问任何类变量我不确定出了什么问题。
解决方案
我发现了这个问题。这与pivottable无关,实际上是scope
问题。在commitmentService
可透视回调中不可见。所以我通过执行以下操作来修复它:
- 移动
getPivotDataDetails
作为一种方法DialogCommitmentPivotComponent
- 现在像这样绑定
getPivotDataDetails
:clickCallback: this.getPivotDataDetails.bind(this)
推荐阅读
- php - Laravel 无法获取超过 15k 条记录
- html - CSS 未设置未按预期工作。如何解决?
- ios - navigationController?.setViewControllers 在方法 viewDidAppear 中工作延迟
- c# - 为什么相同的 MySql 查询在代码和工作台中表现不同?
- java - 为什么我们在 for 循环中使用多个 scriplet 标签而不是一个
- ios - 如何在设备注册日期从苹果开发者控制台上的设备列表中删除设备
- c# - SQL Server 网络接口错误 52 - 在运行时安装时无法找到数据库
- javascript - 如何修复 setAttribute 值未在 UI 中显示
- javascript - 如何将 onchange="this.form.submit()" 添加到 Flask/WTFoms HTML 页面
- cmake - CMAKE - 库的生成文件目标