AngularJS2 Verlieren Bindung nach Rohrfilter

Question

Ich versuche, eine einfache ngFor zu erstellen, um eine Liste von Elementen anzuzeigen und es mit einer Pipe zu filtern.

Das Problem ist, dass wenn ich die Pipe verwenden und ein Element löschen, es aus dem Array auswählen, aber die Anzeige wird nicht aktualisiert.

Plunker

Mein Rohrcode:

class MyFilterPipe { 
    transform(list,remove){ 
     return list.filter((item)=>item.name != remove); 
    } 
} 

Der Template-Code:

<ul> 
    <li *ngFor="#item of list |myFilter:'F' ">{{item.name}} <button (click)="deleteMe(item)">Delete</button></li> 
</ul> 

Dank Avi

Answer 1

Es gibt zwei Kategorien von pipes: rein und unrein.

Angular führt ein reines Rohr nur aus, wenn es eine reine Änderung auf den Eingabewert erkennt. Eine reine Änderung ist entweder eine Änderung an einem primitiven Eingabewert (String, Number, Boolean, Symbol) oder eine geänderte Objektreferenz (Date, Array, Function, Object).

Angular führt ein unreines Rohr während jeden Zyklus Zyklus Erkennung von Komponenten. Eine unreine Pipe wird oft aufgerufen, so oft wie jeder Tastendruck oder jede Mausbewegung.

Slice Verfahren ändert sich nicht von Referenz list Arrays, da die Pfeife ist reinen, abgewinkelte nicht ausführt Rohr und keine Anzeige aktualisiert wird.

Verwendung unreines Rohr

@Pipe({ 
    name: 'myFilter', 
    pure: false 
}) 

oder list Eigenschaft Bezugspunkt ändern, während es aus der Entfernung.