Je voudrais créer un tube personnalisé en 4.x angulaire qui prend une fonction de prédicat en paramètre afin de filtrer les valeurs d'un tableau.Créer un tube personnalisé pour filtrer les valeurs avec un prédicat en angulaire
Voici le code de ma pipe: [Snippet # 1: mypipe.ts]
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(values: any[], predicate: (any) => boolean): any {
return values.filter(predicate);
}
}
Voici comment je l'utilise dans mon modèle: [Snippet # 2: mycomponent.html]
<div *ngFor="let item of (items | filter:(x=>x.isValid))">
Mais lors de l'exécution, je reçois cette erreur: [Snippet # 3]
Error: Uncaught (in promise): Error: Template parse errors:
Parser Error: Bindings cannot contain assignments at column 44 in [let item of (items | filter:(x=>x.isValid))]
Je résolu ce problème en créant un isValid() fonction dans mon composant et en utilisant cette fonction comme un argument de mon filtre:
[Snippet # 4: mycomponent.ts]
isItemValid(item): boolean {
return item.isValid;
}
[Snippet # 5: mycomponent.html]
<div *ngFor="let item of (items | filter:isItemValid)">
Mais je n'aime pas vraiment cette option car je pense qu'elle est moins lisible qu'avec une fonction flèche (il faut passer au fichier component.ts pour comprendre ce qui sera filtré dans component.html).
Existe-t-il une meilleure solution qui ressemblerait à l'extrait # 2?