从 dxi-column [calculateCellValue] 函数调用的函数访问组件范围答案

【问题标题】：Access component scope from a function called by the dxi-column [calculateCellValue] function从 dxi-column [calculateCellValue] 函数调用的函数访问组件范围
【发布时间】：2019-08-02 15:07:22
【问题描述】：

最后一个问题是我无法从使用 [calculateCellValue]="function" 调用的函数中访问 component.ts 的上下文，如果我使用 .bind(this) 传递它，DataGrids 交互功能会不再工作了。

最后一个问题：如何防止 .bind(this) 避免 DataGrid 的功能失效，或者确保我不需要执行 [calculateCellValue]="function.bind(this)" 来传递将组件的上下文传递给函数，并以其他方式使用普通的 [calculateCellValue]="function" 方法传递上下文。

代码如下所示：

我正在使用带有 DxiColumns 的 DxDataGrid，它调用了一个组件函数：

<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 的交互部分现在不再起作用，例如分组的折叠和展开功能。所以现在我被卡住了。我该如何解决？

【问题讨论】：

标签： angular devexpress devextreme devextreme-angular dx-data-grid

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你可以这样写你的 getExampleValue 函数

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

并以这种方式使用它

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

据我所知，箭头函数继承了声明它的范围，因此您不必使用.bind(this)

这里的例子： https://stackblitz.com/edit/angular-tgtpvs

【讨论】：