Angular 2 中的雙向資料繫結

1. Angular 中的雙向資料繫結
2. 在 Angular 2 中實現雙向資料繫結

本教程將討論在 Angular 2 中實現雙向資料繫結。

Angular 中的雙向資料繫結

雙向資料繫結是 Angular 最強大的功能之一。它允許資料從元件流向檢視，反之亦然。

它向使用者提供資訊，並使他們能夠通過使用者介面更改基礎資料。

資料繫結通過跟蹤 UI 的哪些部分依賴於哪些資料並在資料更改時更新來幫助我們管理我們的應用程式狀態。

單向繫結和雙向繫結之間的關鍵區別在於，使用雙向繫結，在任一方向上所做的任何更改都將自動傳播到另一側，而無需我們的任何干預。

Angular 2 預設不使用雙向資料繫結。它根據定義使用單向資料繫結，但如有必要，它為雙向資料繫結提供了簡單的語法。

為了模擬 Angular 2 中的雙向繫結，我們需要使用 ngModel 指令和 ngModelChange 事件。

ngModel 指令將元件模板中的屬性繫結到其類中的屬性。每次繫結屬性的值發生變化時，都會觸發 ngModelChange 事件。

在 Angular 2 中實現雙向資料繫結

ngModel 是 Angular 2 中的雙向資料繫結指令，這意味著它會在發生更改時同時更新檢視和模型。我們可以在每個繫結端設定一個事件處理程式。

因此，只要使用者在使用者介面上對其進行修改，相應的屬性值就會自動更新。

ngModel 可以用作 HTML 標籤上的屬性或類。

讓我們討論一個在 Angular 2 中使用 ngModel 進行雙向資料繫結的示例。

TypeScript 程式碼：

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);
    }
}

點選這裡檢視上面程式碼的演示。