Zwei-Wege-Datenbindung in Angular 2

1. Zwei-Wege-Datenbindung in Angular
2. Implementieren Sie die bidirektionale Datenbindung in Angular 2

In diesem Tutorial wird die Implementierung der bidirektionalen Datenbindung in Angular 2 erläutert.

Zwei-Wege-Datenbindung in Angular

Die bidirektionale Datenbindung ist eine der leistungsstärksten Funktionen von Angular. Es ermöglicht den Datenfluss von der Komponente zur Ansicht und umgekehrt.

Es präsentiert dem Benutzer Informationen und ermöglicht es ihm, die zugrunde liegenden Daten über die Benutzeroberfläche zu ändern.

Die Datenbindung hilft uns, unseren Anwendungsstatus zu verwalten, indem wir nachverfolgen, welche Teile der Benutzeroberfläche von welchen Daten abhängig sind, und aktualisiert werden, wenn sich diese Daten ändern.

Der entscheidende Unterschied zwischen unidirektionaler und bidirektionaler Bindung besteht darin, dass bei bidirektionaler Bindung alle Änderungen, die in beide Richtungen vorgenommen werden, automatisch auf die andere Seite übertragen werden, ohne dass wir eingreifen müssen.

Angular 2 verwendet standardmäßig keine bidirektionale Datenbindung. Es verwendet per Definition eine unidirektionale Datenbindung, bietet jedoch bei Bedarf eine einfache Syntax für die bidirektionale Datenbindung.

Um die bidirektionale Bindung in Angular 2 nachzuahmen, müssen wir die Direktive ngModel und das Ereignis ngModelChange verwenden.

Die Direktive ngModel bindet eine Eigenschaft in der Vorlage Ihrer Komponente an eine Eigenschaft in ihrer Klasse. Das Ereignis ngModelChange wird jedes Mal ausgelöst, wenn sich der Wert dieser gebundenen Eigenschaft ändert.

Implementieren Sie die bidirektionale Datenbindung in Angular 2

ngModel ist eine bidirektionale Datenbindungsanweisung in Angular 2, was bedeutet, dass sowohl die Ansicht als auch das Modell aktualisiert werden, wenn Änderungen vorgenommen werden. Wir können auf jeder Bindungsseite einen Event-Handler einrichten.

Daher wird der entsprechende Eigenschaftswert automatisch aktualisiert, wenn der Benutzer ihn auf der Benutzeroberfläche ändert.

ngModel kann als Attribut oder Klasse auf einem HTML-Tag verwendet werden.

Lassen Sie uns ein Beispiel für die bidirektionale Datenbindung mit ngModel in Angular 2 diskutieren.

TypeScript-Code:

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
            <h3>{{ name }}</h3>
            <input [(ngModel)]="address" />
            `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    name = 'Muhammad Adil';
    address = "block no 1 sector G11, Sydney";
    onKeyUp() {
        console.log(this.address);
    }
}

Klicken Sie hier, um die Live-Demonstration des obigen Codes zu überprüfen.