Datenbindung in Angular ist ein wichtiges Thema, wenn es darum geht, Daten zwischen Komponenten an das DOM zu übergeben. In diesem Artikel werde ich die einseitige und die zweiseitige Datenbindung besprechen.
Dies ist eine unidirektionale Datenbindungsmethode. Wenn wir eine einseitige Datenbindung verwenden, können wir nur Daten von der Komponente zur Ansicht oder von der Ansicht zur Komponente binden. Es gibt viele verschiedene Möglichkeiten, wie wir One-Way Data Binding in unserer Angular-Anwendung verwenden können.
- Interpolation Binding
Interpolation ist eine sehr häufige Methode, die wir verwenden, um Daten in Angular zu binden und dies bezieht sich auf das Binden von Werten in UI-Elemente.
Wie im Beispiel gezeigt, können wir die gebundene Variable in HTML-Elementen verwenden, indem wir geschweifte Klammern wie {{Name}} hinzufügen. Diese Methode wird meist verwendet, wenn zwei Werte miteinander verknüpft werden sollen. z.B.: {{Vorname}} {
2. Property Binding.
Dies ist ein weiterer weit verbreiteter Ansatz, um Daten zu binden, und mit dieser Methode können wir Werte aus Komponenten in die DOM-Eigenschaften der HTML-Elemente binden.
Wenn wir in solchen Situationen Interpolation verwenden, wird die Schaltfläche immer deaktiviert, ohne dass der Wert der Variablen berücksichtigt wird.
3. Attributbindung
Attributbindung wird verwendet, um eine Attributeigenschaft eines Ansichtselements zu binden. Nehmen wir ein Szenario, in dem wir einige Spalten in einer Tabelle mit einem colspan-Attribut zusammenführen müssen.
Wenn wir eine Wertvariable wie im Kommentar gezeigt oder eine Eigenschaftsbindung verwenden, führt dies zu einem Fehler. Wir müssen also eine Attributbindung verwenden, die mit attr beginnt und von einem Punkt und dem Namen des Attributs gefolgt wird.
4. Klassenbindung
Die Syntax der Klassenbindung ist der Attributbindung sehr ähnlich und diese Methode wird verwendet, um eine Klasseneigenschaft eines Ansichtselements festzulegen. Mit dieser Bindungsmethode können wir CSS-Klassen bedingt zu einem Element hinzufügen und so dynamisch gestylte Elemente erstellen.
Die CSS-Eigenschaft Rot wird nur angewendet, wenn die Noten der Schüler niedriger als 40 sind. Ähnlich wie bei der Attributbindung beginnt die Klassenbindung mit dem Schlüsselwort class, gefolgt von einem Punkt und dem Klassennamen.
5. Style Binding
Diese Methode ist ebenfalls sehr ähnlich zu den beiden vorherigen Methoden und wir können Style Binding verwenden, um Inline-CSS-Stile zu setzen.
Zwei-Wege-Datenbindung
Zwei-Wege-Datenbindung bedeutet, dass eine bidirektionale Verbindung zwischen View und Komponente hergestellt wird, die es dem Benutzer ermöglicht, Daten auf beiden Wegen auszutauschen. Die bidirektionale Datenbindung kann leicht durch die Verwendung von (ngModel) erreicht werden.
Bitte stellen Sie sicher, dass Sie das FormsModule aus @angular/forms in die app.component.ts-Datei importieren, wenn Sie (ngModel) verwenden.