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

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

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'.

---

不能在同一文件中定义两个管道。应该使用不同的文件定义两个管道

@Pipe({  
   name: 'orderBy'
 })

及

在HTML中，它是一个示例

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

1）companyone.pipe.ts

从“@angular/core”导入{Pipe，PipeTransform}

从“./公司”导入{Company}

@烟斗({ 姓名：“公司” })

导出类CompanyOnePipe实现PipeTransform{

转换（对象：公司）：字符串{

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



return output;

}

---

}

Angular迫使开发人员为每个文件编写一个类，这是一个很好的实践。如果要创建几个不同的

管道

s，可以通过创建几个不同的文件来实现。例如：

@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

}

如果要在组件中使用管道，还必须将管道添加到模块声明中。 还要注意命名管道类，我可以看到您将其命名为

TransactionComponent

，它与任何组件都没有任何关系。管道类应该是泛型的，并且只做一件事。

使用类似的东西。

---

不要使用两个管道。可以在同一管道中传递多个值。这将提高页面速度

但我希望它们在相同的html页面中，您可以在相同的html中使用| OP要求在html文件中使用两个管道，不是吗？是的，在html文件中使用两个管道

@Pipe({  
  name: 'filterpipe'
})

export class FilterPipe implements PipeTransform{

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

   //code

}