как определить две трубы в одном компоненте

Question

Я хочу знать, как определить две трубы в одном компоненте.Здесь я хочу определить два преобразования в моем компоненте.Один уже определен -

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

Используйте что-то вроде этого.Не используйте две трубы. Вы можете передать несколько значений в одной трубе.Это увеличит скорость страницы

Answer 2

1) companyone.pipe.ts

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

import {Company} из './company';

@ Pipe ({имя: 'companyone'})

класс экспорта CompanyOnePipe реализует преобразование PipeTransform {

(obj: Company): строка {

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 в объявление модуля, если хотите использовать их в своих компонентах.Также будьте осторожны с именами ваших классов Pipe, я вижу, что вы назвали его TransactionComponent, и это действительно не имеет никакого отношения к любому компоненту.Классы конвейера должны быть универсальными и выполнять только одно действие единоличную ответственность .

Answer 4

Вы не можете определить две трубы в одном файле.Вы должны определить две трубы, используя разные файлы.

@Pipe({  
   name: 'orderBy'
 })

и

@Pipe({  
   name: 'filterpipe'
 })

В HTML это образец

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