Question

我想知道如何在同一个组件中定义两个管道。在这里，我想在我的组件中定义两个转换。一个已经定义 -

transaction.component.ts

 import { Pipe, PipeTransform } from '@angular/core';


@Pipe({  
   name: 'orderBy','filterpipe'

 })

export class TransactionComponent implements OnInit ,PipeTransform{

public transform(array: any[], reverse: boolean = false, prop?: 
string) {

//code

}

transform(customers: Customer[], args: any[]): any {
return customers.filter(customer => 
customer.email.toLowerCase().indexOf(args[0].toLowerCase()) !== -1);
 }

//code
}

但在这里，我无法在一个管道中定义两个名称。

我收到错误 -

Argument of type '{ name: string; 'filterpipe': any; }' is not 
assignable to parameter of type 'Pipe'.
Object literal may only specify known properties, and ''filterpipe'' 
does not exist in type 'Pipe'.

Answer 1

您无法在同一文件中定义两个管道。你应该使用不同的文件定义两个管道。

@Pipe({  
   name: 'orderBy'
 })

和

@Pipe({  
   name: 'filterpipe'
 })

在HTML中，它是一个样本

 <div *ngFor="let l of listings | orderBy:'TEST' | filterpipe:'ACTIVE'  ">

Answer 2

1）companyone.pipe.ts

从'@ angular / core'导入{Pipe，PipeTransform};

从'./company'导入{Company};

@Pipe（{ 名称：'companyone' }）

导出类CompanyOnePipe实现PipeTransform {

transform（obj：Company）：string {

let output = obj.cname+' : '+ obj.location;



return output;

} }

Answer 3

Angular强迫开发人员为每个文件编写一个类，这是一个很好的做法。如果您想创建几个不同的Pipe，可以通过创建几个不同的文件来创建它们。例如：

@Pipe({  
  name: 'orderBy'
})

export class OrderByPipe implements PipeTransform{

  public transform(array: any[], reverse: boolean = false, prop?: 
  string) {

   //code

}

其他管道：

@Pipe({  
  name: 'filterpipe'
})

export class FilterPipe implements PipeTransform{

  public transform(array: any[], reverse: boolean = false, prop?: 
  string) {

   //code

}

如果要在组件中使用它们，还必须将Pipe添加到模块声明中。还要注意命名管道类，我可以看到你将它命名为TransactionComponent，它实际上与任何组件没有任何关系。管道类应该是通用的，只做一件事single responsibility。

Answer 4

使用类似这样的东西。不要使用两个管道。您可以在同一管道中传递多个值。它将提高页面速度

如何在同一组件中定义两个管道

4 个答案: