问题描述
我正在使用 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”是数据源,而我想通过管道传输的字段是“file”,则网格的模板代码如下所示:
<kendo-grid [data]="dataSource" ... >
...
<kendo-grid-column field="file | customPipe" ... >
...
</kendo-grid-column>
...
</kendo-grid>
我在浏览器控制台中收到一条警告:
网格列字段名称'文件| customPipe' 看起来不是有效的 JavaScript 标识符。
...这是正确的。它不是有效的 Javascript 标识符。 'file' 不是组件的类成员,而是数据源中的一个字段,因此通过 customPipe 传送它的语法不正确。
如何通过自定义管道对 Kendo UI 网格的数据源中的字段进行管道传输?
解决方法
你应该这样写
<kendo-grid-column [field]="file | customPipe" ... >
...
</kendo-grid-column>