2016-06-15 18 views
2

Der Versuch, eine benutzerdefinierte Pipe zu schreiben, um einige Elemente zu verbergen.Angular 2 Filter Pipe

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> 

COMPONENT

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

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

Mein Element die Eigenschaft sichtbar ist, die wahr oder falsch sein kann.

Aber nichts zeigt, ist etwas falsch mit meiner Pfeife?

glaube, ich meine Pfeife funktioniert, denn wenn ich das Rohr Code zu ändern:

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; 
    } 
} 

Es werden alle Elemente zeigen.

Dank

+0

Haben Sie 'pipes: [ShowPipe]' zu der Komponente hinzugefügt, in der Sie die Pipe verwenden? Ich kann nichts in Ihrem Code falsch sehen. –

+0

aktualisierter Code ... – tony

+0

Was passiert, wenn Sie es zu einem unreinen Rohr machen? '@ Pipe ({ Name: 'showfilter', rein: falsch })' – PierreDuc

Antwort

1

Ich bin mir ziemlich sicher, dass dies, weil Sie einen Anfangswert von [] für items hat. Wenn Sie später Elemente zu items hinzufügen, wird die Pipe nicht erneut ausgeführt.

pure: false Hinzufügen sollte es beheben:

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

pure: false hat eine große Auswirkung auf die Leistung. Solch eine Pipe wird jedes Mal aufgerufen, wenn die Änderungserkennung ausgeführt wird, was sehr häufig ist.

Eine Möglichkeit, eine reine Pipe aufzurufen, besteht darin, den Eingabewert tatsächlich zu ändern.

Wenn Sie das tun

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

jedes Mal nach items modifiziert wurde (hinzugefügt/entfernt) macht Angular die Änderung erkennen und das Rohr erneut auszuführen.

+1

vielen Dank, das hat es behoben. – tony

Verwandte Themen