0

Preciso de ajuda de alguém, procurei bastante mais não consegui achar. Tenho dois campos DataInicio e DataFim e preciso fazer um filter no ngFor para filtrar pelas datas selecionadas. Exemplo *ngFor="let order of opportunities | dateRange:'forecast':startDate:endDate; let i=index". Pesquisei e isso faz com PipeTransform...mas não tenho nem idéia de como fazer.

1 Resposta 1

0

Olá!

No seu caso, eu criaria apenas uma função no próprio componente que filtrasse o seu array, para evitar ficar executando o código do pipe diversas vezes.


filtrarItens(arrayOriginal, startDate, endDate) {
  this.opportunities  = arrayOriginal.filter(item => {
    return this.inRange(item.forecast, startDate, endDate);
  });
}

/**
 * Verifica se a data está entre a data inicial e a data final
 */
inRange(data, startDate, endDate) {
  return startDate <= data && endDate >= data;
}

Mas para você ficar por dentro sobre pipes, abaixo eu dei uma pequena explicação sobre sua utilização.


O que é o pipe?

O PipeTransform é um mecanismo do Angular para tratar dados antes de exibi-los na DOM. O próprio Angular possui seus próprios pipes como DatePipe que formata uma data para a qual você seja, UpperCasePipe para tornar letras maiúsculas, CurrencyPipe para formatar moedas, etc.

Como utilizar o pipe do angular?

A utilização de um pipe é bem simples.

{{ dado | nomePipe : PARAMETRO1 : PARAMETRO2 : PARAMETRO3 }}

O dado é o elemento que você deseja formatar. Depois vem essa barrinha ( | ) para informar ao Angular que será aplicado um pipe chamado nomePipe. E por fim, separado por dois pontos, são passados todos os parâmetros necessários para o pipe.

Porém tome bastante cuidado em utilizar Pipes dentro de *ngFor, pois toda vez que o Angular detectar uma mudança ele executará o pipe novamente, e dependendo da complexidade pode deixar sua aplicação bastante lenta.

Criando um pipe:

Você pode criar os seus próprios pipes. Pelo que entendi você deseja uma função que passe o array de itens para filtrar e mais 3 argumentos, que são:

  1. atributo (forecast) - seria o atributo do objeto com a data para comparar
  2. startDate - a data inicial.
  3. endDate - a data final.

Você pode criar um pipe pelo comando ng generate pipe dateRange que irá gerar um arquivo com a função transform, ela que será executada para tratar o seu dado. Abaixo eu fiz uma implementação para filtrar as datas.

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

@Pipe({
  name: 'dateRange'
})
export class DateRangePipe implements PipeTransform {

  transform(value: any, atributo: string, startDate: Date, endDate: Date): any {
    if (!value) {return value };
  
    return value.filter(item => {
      return this.inRange(item[atributo], startDate, endDate);
    })
  }

  /**
   * Verifica se a data está entre a data inicial e a data final
   */
  private inRange(data, startDate, endDate) {
    return startDate <= data && endDate >= data;
  }

}

Fiz um exemplo no stackBlitz de um projetinho, você pode ver melhor como funciona.


Links legais:

2
  • Bruno, é bem por aí que eu precisava. Fiz algumas e estou conseguindo exibir somente os registros do mês (exemplo 09-2020), mas quando tento filtrar ele não está buscando os registros. Segue exemplo do que estou fazendo pastebin.com/g2rnBLLd Commented 29/09/2020 às 16:10
  • Aparentemente a comparação que está fazendo entre as datas está incorreta. O "format()" retorna uma string e não um tipo "moment" que facilite a comparação. O que vc pode fazer é converter o startDate e endDate para o tipo moment assim: momentjs.com/docs/#/parsing/string.... e depois comparar se a data está entre os dias: momentjs.com/docs/#/query/is-between. Veja se dará certo, qualquer coisa só falar Commented 29/09/2020 às 17:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .