如何通過 angular 11 中的管道傳遞 Kendo UI 網格中的數據字段？

Question

我正在使用 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>

我在瀏覽器控制台中收到一條警告：

網格列字段名稱 'file | customPipe' 看起來不像一個有效的 JavaScript 標識符。

……這是對的。 它不是有效的 Javascript 標識符。 'file' 不是組件的類成員，而是數據源中的一個字段，因此通過 customPipe 進行管道傳輸的語法不正確。

如何通過自定義管道對 Kendo UI 網格的數據源中的字段進行管道傳輸？

Answer 1

你應該這樣寫

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