tuyau souple pour filtrer les objets

Question

je suis en train de faire un tuyau souple pour filtrer mon tableau d'objets pour l'afficher avec * ngFor

<div class="wrapper" *ngFor="let item of items | myFilter:property:true"> 

par exemple, je veux montrer div seulement pour objet avec une véritable propriété:

[ 
{'name':'first', 'property': 'true'}, 
{'name':'last', 'property': 'false'} 
] 

Il semble ne pas fonctionner lorsque je tente de définir la propriété dynamique comme celui-ci

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

@Pipe({ 
name: 'myFilter' 
}) 
export class FilterPipe implements PipeTransform { 
    transform(items: any[], key: any, value: any): any { 
     return items.filter(item => item[key] === value ? item : null); 
    } 
} 

J'ai essayé aussi ce

item['"' + key + '"'] 

et cela (avec des chaînes de modèle de ES6)

item[`"$key"`] 

mais cette conduite fonctionne bien si j'appelle propriété droit comme celui-ci

item.property 

Et je vraiment besoin de faire plus flexible, parce que j'ai beaucoup de situations dans mon application où j'ai besoin de filtrer les éléments par différentes valeurs de propriétés

Answer 1

Votre tuyau est certainement correct, vous manque juste la '' sur votre HTML Essayez de l'appeler comme ceci: <div class="wrapper" *ngFor="let item of items | myFilter:'property':true"> et cela fonctionnera parfaitement. C'est parce que le canal attend une chaîne, mais vous donnez une référence d'objet. propriété! = 'propriété'

Answer 2

Array.filter attend votre fonction de filtre pour retourner un boolean, ce qui signifie que vous devez changer votre filtre pour cela:

transform(items: any[], key: any, value: any): any { 
    return items.filter(item => item[key] === value); 
} 

Source: MDN