3
respostas

Dois filtros no pipe

Boa tarde Flávio tudo bem?

Acabei recorrendo a você porque acabei por não encontrar a solução para a minha dúvida. Eu queria saber como eu consigo inserir dois filtros no pipe. No caso eu fiz o filtro por descrição e fiz um filtro por id, com o código abaixo:

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

@Pipe({ name: 'filterById' })
export class FilterByIdPipe implements PipeTransform {

      transform(photos: Photo[], descriptionQuery: string) {
            descriptionQuery = descriptionQuery.trim().toLowerCase();

            if (descriptionQuery) {
                  return photos.filter(photo => photo.id.toString().includes(descriptionQuery));
            } else {
                  return photos;
            }
      }

}

Porém ao aplicar os dois filtros no componente ap-photos só um filtro funciona por vez, ou faz os dois filtros resultando em não encontrar nada.

<ap-photos [photos]="photos | filterByDescription: filter | filterById: filter "></ap-photos>
import { NgModule } from '@angular/core';
import { PhotoListComponent } from './photo-list.component';
import { PhotosComponent } from './photos/photos.component';
import { LoadButtonComponent } from './load-button/load-button.component';
import { FilterByDescriptionPipe } from './filter-by-description.pipe';
import { CommonModule } from '@angular/common';
import { PhotoModule } from '../photo/photo.module';
import { CardModule } from 'src/app/shared/components/card/card.module';
import { FilterByIdPipe } from './filter-by-id.pipe';

@NgModule({
      declarations: [
            PhotoListComponent,
            PhotosComponent,
            LoadButtonComponent,
            FilterByDescriptionPipe,
            FilterByIdPipe
      ],
      imports: [
            CommonModule,
            PhotoModule,
            CardModule
      ]
})
export class PhotoListModule { }

Nesse caso a única solução seria criar um filtro único com os dois filtros? Ou tem como fazer essa filtragem no template em si direto?

3 respostas

Fala ai Erivan, tudo bem? É possível ter mais de um Pipe para o mesmo elemento, segue um exemplo:

<li *ngFor="let p of people | filterAge: 18 | filterName: 5">{{ p.name }}</li>

Obs: A ordem dos pipe's influencia, onde nesse exemplo, primeiro será aplicado o filtro por idade e depois o filtro pela quantidade de letras do nome.

No caso estou filtrando as pessoas que são maiores de idade (18 anos) e com mais de cinco letras no nome.

Espero ter ajudado.

Então, acho que é isso que está acontecendo na minha aplicação. Porém eu gostaria que ele aplicasse um filtro ou o outro. Caso o usuário buscasse por descrição ou caso ele busque pelo id, mas sem ter que criar um filtro único com os dois filtros juntos, deixá-los separados caso precise usar somente um em outra parte do código.

Acho que nesse caso seria mais interessante você adicionar os dois filtros nos mesmo Pipe, assim você vai saber quando precisa aplicar um ou outro.

Espero ter ajudado.