Angular 2 Filter Pipe

Essayer d'écrire un tuyau personnalisé pour cacher certains éléments.

import { Pipe } from '@angular/core'; // Tell Angular2 we're creating a Pipe with TypeScript decorators @Pipe({ name: 'showfilter' }) export class ShowPipe { transform(value) { return value.filter(item => { return item.visible == true; }); } }

HTML

 <flights *ngFor="let item of items | showfilter"> </flights>

COMPOSANT

 import { ShowPipe } from '../pipes/show.pipe'; @Component({ selector: 'results', templateUrl: 'app/templates/results.html', pipes: [PaginatePipe, ShowPipe] })

Mon objet a la propriété de visible, ce qui peut être vrai ou faux.

Cependant, rien ne montre, est-ce qu'il y a un problème avec ma pipe?

Je pense que mon tuyau fonctionne parce que lorsque je change le code du tuyau pour:

 import { Pipe } from '@angular/core'; // Tell Angular2 we're creating a Pipe with TypeScript decorators @Pipe({ name: 'showfilter' }) export class ShowPipe { transform(value) { return value; } }

Il affichera tous les éléments.

Merci

Je suis plutôt sûr que c'est parce que vous avez une valeur initiale de [] pour les items . Lorsque vous ajoutez plus tard des éléments aux items , le tuyau n'est pas ré-excédé.

Ajouter pure: false devrait le réparer:

 @Pipe({ name: 'showfilter', pure: false }) export class ShowPipe { transform(value) { return value.filter(item => { return item.visible == true; }); } }

pure: false a un impact majeur. Une telle conduite est appelée chaque fois que les opérations de détection de changement, ce qui est assez souvent.

Une façon de faire appel à un tuyau pur est de modifier réellement la valeur d'entrée.

Si tu fais

 this.items = this.items.slice(); // create a copy of the array

Chaque fois que les items été modifiés (ajoutés / enlevés), Angular reconnaît la modification et ré-exécute le tuyau.