Einfache Datenbindung in Angular2
Ich habe den folgenden html
%Vor%Ich möchte, dass die Daten und Spalteneigenschaften unveränderbar sind. Das Raster sollte es nur anzeigen. Aber im Falle einer Sortierung oder Filterung würden sich die Daten ändern, zumindest die Reihenfolge.
Aber hier ist mein Problem. Wenn ich auf das Datenfeld zugreife und eine Eigenschaft eines enthaltenden Objekts modifiziere. So.
%Vor%Das Original wird geändert. Aber ich dachte [Daten] ist nur eine Möglichkeit, Daten gebunden.
Könnte mir jemand in die richtige Richtung zeigen, warum dies geschieht und wie ich es auslassen kann. Ich komme von React, wo das ziemlich einfach wäre.
3 Antworten
Sie haben Recht, die Syntax [target]=expression ist eine einseitige Datenbindung, aber ich denke, dass Sie die Idee der Einweg-Datenbindung falsch verstanden haben.
Eine Art der Datenbindung von der Datenquelle zum Ansichtsziel bedeutet, dass Werte aus der Ansicht nicht an die Komponente zurückgegeben werden, während Änderungen am Ausdruck in der Komponente in der Ansicht widergespiegelt werden - es handelt sich um eine einseitige Datenbindung von der Datenquelle zur Ansicht, was nicht bedeutet, dass es einmal Datenbindung ist.
Auf der anderen Seite finden Sie möglicherweise eine Datenbindung vom View-Ziel zur Datenquelle mit der Syntax (target)=expression , die verwendet wird, um Ereignisse an die Komponenten zurückzuleiten.
Sie können mehr über die Datenbindung von Angular2 in der Dokumentation hier finden: Ссылка .
- Wenn Sie
[ngModel],[value],{{ param }}usw. verwenden, haben Sie eine unidirektionale Bindung, das Modell zu sehen, - Wenn Sie
(ngModelChange)verwenden, haben Sie eine unidirektionale Bindung, Ansicht zum Modell, - Wenn Sie
[(ngModel)]verwenden, haben Sie eine Zwei-Wege-Bindung.
Aber Sie verwenden eine Unterkomponente mit der Eigenschaft @Input() und dies tanzt aus der Zeile heraus ;-) Die Notation ist nicht so, wie sie aussieht, weil sie immer gebunden ist.
Wenn Sie also das myObj in Ihrer Unterkomponente ändern, wird es gebunden:
%Vor%Sie könnten mit einer lokalen Kopie von myObj arbeiten, um das Binden zu verhindern.
Wenn Sie ein Update vom Modell benötigen, können Sie es mit @Output() als Event:
Tags und Links angular