Angular2/4 Comment mettre à jour le modèle dans * ngFor travaille sur [objet, objet]?

Question

Je JSON objet comme

var obj = { 
    "TimSays":"I can Walk", 
    "RyanSays":"I can sing", 
    "MaxSays":"I can dance", 
    "SuperSays":"I can do it all" 
} 

Je veux itérer cet objet dans le modèle, donc je suis en utilisant l'aide de la conduite car il n'y a aucun moyen direct de obj itérer dans le modèle en Angular2/4

import { Injectable, Pipe } from '@angular/core'; 
@Pipe({ 
    name: 'keyobject' 
}) 
@Injectable() 
export class Keyobject { 

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

modèle de code

<div *ngFor="let o of obj | keyobject">{{o.value}}{{o.key}}</div> 

Dans mon Javascript si je fais des changements aux changements dynamiques de l'objet JSON ne se font pas réfléchi sur le modèle .

obj.TimSays = "je veux dormir";

Dans le modèle, il est toujours dit que je peux marcher. Ce que je dois faire ici dans le cas où template et ngFOr (Object) fonctionne comme une liaison bidirectionnelle.

Answer 1

Dans les tubes angulaires sont pur par défaut, cela signifie qu'ils ne s'exécutent que s'il y a un changement pur à son entrée.

Si vous voulez que votre conduite est en cours d'exécution à chaque changement du cycle de détection que vous devez faire dans impur comme ceci:

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

Mais gardez à l'esprit que cela peut avoir un impact significatif sur vos performances.

Il serait préférable d'effectuer un changement « pur » à l'entrée en créant une nouvelle référence lorsque modifing votre objet, par exemple en utilisant Object.assign:

obj = Object.assign({}, obj, { TimSays: 'i want to sleep' }); 

Vous pouvez trouver plus de détails sur impure/pur tuyaux dans le docs.

Answer 2

Une solution simple est

<div *ngFor="let o of obj | keyobject:counter">{{o.value}}{{o.key}}</div> 

puis incrémenter counter après modification. Cela évite de créer un nouvel objet pour chaque modification.

Cela fonctionne car Angulaire appelle le tube chaque fois que la valeur d'entrée change (référence d'objet pour les objets) ou l'un des paramètres transmis au tube.

Cela peut devenir fastidieux si l'objet est modifié à un endroit différent de votre application.