如何在Angular中为ngx-datatable-column传递多个管道？

Posted 2021-04-08

我想问一下你是否有任何想法如何在Angular中传递多个管道？

目前，我的代码只传递一个管道。

const customPipe1 = new CustomPipe2();
const customPipe2 = new CustomPipe2();

  <ngx-datatable-column
      [width]="width"
      [name]="cname"
      [prop]="cbindProperty"
      [pipe]="customPipe1">
  </ngx-datatable-column>

我想在该列中添加两个或多个管道。在简单的html中这样的东西。

{{ birthday | customPipe1 | customPipe2 }}

答案

这与ngx-datatable无法实现。你可以在源代码中看到here。

但是，您可以创建另一个执行相同操作的管道：

没有必要使用注释使其成为Pipe，因为您不会使用该名称，这样您也不必将其添加到声明中

export class ColumnPipe implements PipeTransform {
  pipes: any[] = [
    new BirthdayPipe(),
    new CustomPipe1(),
    new CustomPipe2()
  ];

  public transform(input: any): any {
    return this.pipes.reduce((output, pipe) => pipe.transform(output), input);
  }
}

您的内部管道可能需要注入一些服务。在这种情况下，您需要将管道添加到providers数组，以及需要注入的管道，并将它们注入ColumnPipe的构造函数中。