angular2 pipe und neue Daten

Question

Ich arbeite an einem eckigen Rohr, um Stämme zu behandeln und zu filtern.

meine Pfeife sieht wie folgt aus

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

@Pipe({ 
name: 'logFilter' 
}) 
@Injectable() 
export class logFilterPipe implements PipeTransform { 
    transform(items: any[], args: any[]): any { 
    //console.log(items); 

    if (!args || args.length == 0) 
    { 
     return items; 
    } 

    return items.filter(item => item.msg.indexOf(args[0]) !== -1); 

} 
} 

html Teil

<input type="text" [(ngModel)]="filterLog" class="validate" /> 

<ul id="messages"> 
    <li *ngFor="let msg of messages | logFilter:filterLog"> <div class="chip">{{ msg.user }}</div> {{ msg.msg }}</li> 
</ul> 

neue Nachrichten ein socket.io Eingang

this.socket.on werfen hinzugefügt werden kann ('message', Funktion (Nachricht, Benutzer) { this.messages.push ({Benutzer: Benutzer, Nachricht: Nachricht});

Der Filter funktioniert einwandfrei, wenn ich den Eingabetext eintippe, aber wenn danach neue Nachrichten hinzugefügt und nicht angezeigt werden (zB gefiltert), denke ich, dass es etwas zum Auslösen des Filterupdates gibt?

Answer 1

Angular Änderungsdetektions nicht erkennt Änderungen innerhalb Arrays Array-Instanz nur Änderungen (Durchleiten eines anderen Array-Instanz)

Herstellung des Rohr unreinen

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

macht Angular2 das Rohr jedesmal, wenn Änderungserfassungs auszuführen wird für die Komponente ausgeführt, in der das Rohr verwendet wird.

Alternativ können Sie auch this arr = this.arr.splice() nach jeder Änderung verwenden, um eine andere Kopie des Arrays für die Änderung zu erstellen, um von Angular benachrichtigt zu werden.

Es hängt vom Anwendungsfall und der Array-Größe ab, welcher Ansatz effizienter ist.