Question

最后一个问题是，我无法从使用[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的交互式部分现在不再起作用，例如分组的折叠和展开功能。所以现在我被困住了。我该怎么解决？

Answer 1

您无法使用“ get”访问器传递参数。您可以改用实例箭头。

getExampleValues = (dataGridContext: any) => {
    return this.exampleItems.length;
}

Answer 2

您可以这样编写getExampleValue函数

getExampleValues(dataGridContext: any) {
   return () => this.exampleItems.length;
}

并以这种方式使用

<dxi-column dataField="exampleField" [calculateCellValue]="getExampleValues()"></dxi-column>

据我所知，arrow函数从声明它的地方继承了作用域，因此您不必使用.bind(this)

示例在这里： https://stackblitz.com/edit/angular-tgtpvs

通过dxi-column [calculateCellValue]函数

2 个答案: