最后一个问题是我无法从使用 [calculateCellValue]="function" 调用的函数访问 component.ts 的上下文,如果我使用 .bind(this) 传递它,DataGrids 交互功能将不再起作用.
最后一个问题:如何防止 .bind(this) 避免 DataGrid 的功能失效,或者确保我不需要执行 [calculateCellValue]="function.bind(this)" 来传递组件到函数,并以其他方式使用正常的 [calculateCellValue]="function" 方法传递上下文。
这是代码的样子:
我将 DxDataGrid 与 DxiColumns 一起使用,它调用了一个组件函数:
<dxi-column dataField="exampleField" [calculateCellValue]="getExamplevalues"></dxi-column>
Angular 组件中的 getExamplevalues 函数如下所示:
getExampleValues(dataGridContext: any) {
return this.exampleItems.length;
}
exampleItems 在组件中的 ngOnInit-function 中启动:
public example$: Subscription;
public exampleItems: any;
constructor(private exampleService: ExampleService) { }
ngOnInit(): void {
this.example$ = this.exampleService.getAll().subscribe(items => this.exampleItems = items);
}
但是,在 getExamplevalues-function 中 this.exampleItems 始终未定义,因为该函数仅返回 DxDataGrid 的上下文,而不是 Angular 的 component.ts 上下文。
一个解决方案是改变:
<dxi-column dataField="exampleField" [calculateCellValue]="getExampleValues"></dxi-column>
=>
<dxi-column dataField="exampleField" [calculateCellValue]="getExampleValues.bind(this)"></dxi-column>
通过这种方式,您也可以访问组件上下文,但是,DataGrid 的交互部分现在不再工作,例如分组的折叠和展开功能。所以现在我被卡住了。我该如何解决?