Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Passagem de parâmetros ao método transform de um Pipe

Na invocação do pipe é passado o texto digitado como parâmetro

*ngFor="let foto of fotos | filtroPorTitulo: textoProcurado.value"

Mas o método 'transform' espera dois, sendo o primeiro uma lista de objetos do tipo FotoComponent e o segundo o texto digitado.

transform(fotos: FotoComponent[], digitado: string){

        return fotos.filter( (foto) => {
            return foto.titulo.toLowerCase().includes(digitado.toLowerCase());
        });
    }

Como que o Angular envia a lista de fotos ao pipe, visto que este recebe explicitamente apenas o texto digitado?

2 respostas
solução!

Hola Antônio,

Para entender como funciona isso, você precisa entender como funcionam os parâmetros do transform.

Quando se gera um Pipe, o transforme aparecerá assim:

transform(value: any, args?: any): any {
    return value;
}

Ele recebe dois parâmetros:

  • O primeiro chamado de value é o valor que será formatado nesse Pipe.
  • O segundo parâmetro, o args é qualquer tipo de argumento que seja necessário ser passado para o Pipe. Ele também vem juntamente com o Operador Elvis (?) indicando que é um argumento que pode não existir.

Vamos supor que criamos um Pipe para reverter uma String:

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

@Pipe({
  name: 'reverseString'
})
export class ReversePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return value.split("").reverse().join("");
  }

}

No HTML usaríamos assim:

<p>{{ minhaString | reverseString }} </p>

Significa que o minhaString foi passado como o primeiro parâmetro para a função transform.

Quando se utiliza, como no seu caso, em um repetidor:

*ngFor="let foto of fotos | filtroPorTitulo: textoProcurado.value"

Significa que o *ngFor vai funcionar normalmente, e que a cada linha encontrada no Array, ele irá aplicar o filtroPorTitulo.

  • O primeiro argumento é o que virá antes do |, ou seja, foto.

  • O segundo parâmetro por sua vez é o textoProcurado.value.

Espero ter ajudado \\//_

Priscila, perfeita sua explicação. Obrigado por compartilhar

Oi Antônio. Se não houver mais dúvidas marque a resposta de Priscila como solução, ela foi bem completa.

Feliz 2018 para ambos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software