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
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:
- atributo (forecast) - seria o atributo do objeto com a data para comparar
- startDate - a data inicial.
- 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:
-
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