Angular 2 - * ngFor mit Schlüssel Rohr wird nicht aktualisiert, wenn Objekt geändert wird

Question

Ich benutze Schlüssel pipe in * ngfor Schleife. Daten werden in JSON eingespeist.

@Pipe({ 
     name: 'keys' 
    }) 
    export class KeysPipe implements PipeTransform { 
     transform(value, args: string[]): any { 
     if (!value) { 
      return value; 
     } 

     let keys = []; 
     for (let key in value) { 
      keys.push({key: key, value: value[key]}); 
     } 
     return keys; 
     } 
    } 

-

<div *ngFor="let item of jsonObject | keys"> 
     <p>{{ item.value.code }}</p> 
</div> 

Das Problem ist, wenn ich auf des Elements in JSON löschen, wird ngFor nicht aktualisiert.

Ich habe zwei Optionen bereits versucht:

• this.applicationRef.tick Aufruf(); nach Elemente löschen, keine Änderung
• unreinen pipe "rein: false". Das verursachte enormen Speicherverbrauch in Chrome in Hunderten von MBs und ich musste den Prozess beenden.

Wenn es anders geht?

Danke!

Answer 1

Eine Möglichkeit, um eine tiefe Kopie von temp JSONObject versuchen, die Sie ausprobieren können:

delete(id) { 
    this.jsonObject = this.jsonObject.filter(x => x.id !== id); 
} 

diese Weise können Sie nicht das ursprüngliche Array mutiert. Das ist crutial Sache für Rohr

Siehe auch

• NgFor doesn't update data with Pipe in Angular2
• Unraveling Angular 2 book, Chapter 1, Example 5

Answer 2

Pure Rohre werden nicht ausgeführt, es sei denn, die Referenz oder der Wert wird geändert. Um dies zu beheben, fügen Sie pure: false zu Ihrem Rohrdekorateur hinzu. Siehe Pipes

ex.

@Pipe({ 
    name: 'keyVal', 
    pure: false 
}) 
export class KeyValPipe implements PipeTransform { 
    ... 
} 

EDIT ich nicht sehen, dass die OP bereits getan hatte. Eine andere Option besteht darin, eine temporäre Variable festzulegen und dann jsonObject zuzuweisen, wodurch eine neue Referenz erstellt wird. Sie könnten auch