时间戳

首页 > 解决方案 > 如何通过 Angular 11 中的管道传递 Kendo UI 网格中的数据字段？

angular - 如何通过 Angular 11 中的管道传递 Kendo UI 网格中的数据字段？

问题描述

我正在使用 Angular 的 Kendo UI 网格从事 Angular 11 项目。我被要求通过自定义管道来传输其中一列的数据：

@Pipe({
  name: 'customPipe'
})
export class CustomPipe implements PipeTransform {
  transform(id: string): string {
    if (id === 'not found') {
      return '---';
    }
    return id;
  }
}

管道工作，因为我能够实现以下代码并查看 --- 当 id 为“未找到”时以及在所有其他情况下 id 的实际值：

{{ 'found' | customPipe }}<br> <!-- prints out 'found' -->
{{ 'not found' | customPipe }} <!-- prints out '---' -->

问题在于，对于 Kendo UI 网格，数据从数据源内部的字段绑定到网格，这些字段不是组件类的成员。因此，如果“dataSource”是数据源，而我要通过管道传输的字段是“文件”，则网格的模板代码如下所示：

<kendo-grid [data]="dataSource" ... >
  ...
  <kendo-grid-column field="file | customPipe" ... >
    ...
  </kendo-grid-column>
  ...
</kendo-grid>

我在浏览器控制台中收到一条警告，上面写着：

网格列字段名称'文件| customPipe' 看起来不像是一个有效的 JavaScript 标识符。

...这是正确的。它不是有效的 Javascript 标识符。'file' 不是组件的类成员，而是数据源中的字段，因此通过 customPipe 管道它的语法不正确。

如何通过自定义管道将数据源中的字段用于 Kendo UI 网格？

标签： angularpipekendo-griddatasource

解决方案

你应该这样写

  <kendo-grid-column [field]="file | customPipe" ... >
    ...
  </kendo-grid-column>

推荐阅读