2016-02-18 32 views
9

Wie kann ich auf Änderungen am ngModel achten? Das Problem: ist, dass, wenn ich verknüpfen (ändern) oder (klicken Sie auf) Ereignis auf das Element, in der angegebenen Funktion, wenn ich auf das Modell zugreifen, wird es immer noch nicht geändert. Wenn ich setTimeout von 500ms hinzufüge, kann ich das geänderte Modell. Irgendeine Idee, wie ich das wirklich geänderte Objekt ohne setTimeout bekommen kann, was sehr schlecht ist? -Code in dem HTML-Code:Angular 2 Modellwechsel anhören

<input type="checkbox" (click)="autoJoinToggle()" [(ngModel)]='active.bookmark.autoJoin'> Autojoin 

-Code in der Komponente:

console.log(this.active.bookmark.autoJoin) // returns the current value (before the change) 
setTimeout(() => {console.log(this.active.bookmark.autoJoin);}, 500); //returns the value after the change 

Ich kann das nicht mit kantiger Kontrolle, weil ich das Modell binded und das „aktive“ Objekt muß, existiere nicht in erster Linie , und wenn ich den Wert des Steuerelements aktualisieren möchte, nachdem "aktiv" definiert wurde, muss ich Änderungen am "aktiven" Objekt abhören (das sich über die Zeit ändert). Das gleiche Problem ist mit der lokalen Variablen und @ViewChild -> Ich muss immer noch wissen, wenn "aktiv" ändert, also aktualisiere ich auch die lokale Variable.

ist hier ein gif auch: enter image description here

Antwort

7
(ngModelChange)="doSomething($event)" 

oder

autoJoinToggle(cb){ this.active.bookmark.autoJoin = cb; //do something.. } 

<input #cb type="checkbox" (click)="autoJoinToggle(cb.checked)" 
    [(ngModel)]='active.bookmark.autoJoin'> 

Ich denke, das Verhalten, das Sie erklären, obwohl ein Fehler ist und eine Pull-Anforderung bereits angegeben, aber nicht https://github.com/angular/angular/issues/6311 hinzugefügt.

+1

Diese Lösung funktioniert lokale Variable + ngModel mit, die aber in der doSomething Funktion Ich habe explizit 'this.active.autoJoin = cb.checked', die ich denke, für vorübergehende Lösung, bis das Problem in Ordnung ist, ist fest –

+0

Sie Can' autoJoinToggle (cb) { this.active.bookmark.autoJoin = cb; // etwas tun .. } ' so wird es eine vollständige Lösung für jemand anderen zu sehen sein –