Angular 2 Filter Pipe

Question

Essayer d'écrire un tube personnalisé pour masquer 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> 

COMPOSANTE

import { ShowPipe } from '../pipes/show.pipe'; 

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

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

Cependant, rien ne montre, y at-il quelque chose qui ne va pas avec mon tuyau?

Je pense que ma pipe fonctionne parce que quand je change le code de conduite à:

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 montrera tous les éléments.

Merci

Answer 1

Je suis sûr que ce soit parce que vous avez une valeur initiale de [] pour items. Lorsque vous ajoutez ensuite des éléments à items, le tube n'est pas réexécuté.

Ajout pure: false doit fixer:

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

pure: false a un grand impact sur les performances. Un tel tuyau est appelé chaque fois que la détection de changement se produit, ce qui est assez fréquent.

Une façon d'appeler un tube pur consiste à modifier réellement la valeur d'entrée.

Si vous

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

chaque fois après items a été modifié (ajouté/supprimé) fait reconnaître le changement angulaire et re-exécuter le tuyau.