基礎認識

雙向繫結簡單來說就是內嵌細節與屬性繫結的合體技，寫法為 EX. [(ngModel)]="keyword"，外側為中括號，內側為小括號，裡面加上屬性，順序不能相反，若相反則無法執行。

同步綁定

倘若今天有一個表單，希望可以在表單輸入的時候同時改變資料內的值，或是當我改變 component 的資料時，同時改變表單內的值，可以這樣寫。

HTML 標籤

<input type="text" [(ngModel)]="keyword" />

component

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  keyword = "";

  constructor() {}
}

匯入之後會發現網頁無法執行，會看到 VScode 有一個問題，寫的是：

Can't bind to 'ngModel' since it isn't a known property of 'input'.
在 input 中不認識 ngModel 這個屬性。

所以要將其匯入 app.module.ts 內，才能實現雙向綁定。

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { FormsModule } from "@angular/forms"; // 新增此 import

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, FormsModule], // 加入倒 imports
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

新增 Angular 本身就內建的的 formModule，所以只要在 from 後面輸入 @angular/...，就會出現 forms 選項，在跳到前面的大括號內輸入 Form 關鍵字，就會跳出 FormsModule 的選項可以選，所以都不用自己打喔~!!

最後在 imports 複製貼上增加 FormsModule 就可以了。

<input type="text" [(ngModel)]="keyword" />
<br />
<p>關鍵字： {{keyword}}</p>
<p>文字長度：{{keyword.length}} 個字元</p>

這樣就得到預期的結果。

使用 ESC 清空輸入框內容。

使用 keyup 事件，帶入 esc 按鍵全名。

<input type="text" [(ngModel)]="keyword" (keyup.escape)="keywordReset()" />
<br />
<p>關鍵字： {{keyword}}</p>
<p>文字長度：{{keyword.length}} 個字元</p>

component 加入方法，在練習當下我只有在方法中輸入 keyword，Angular 就自動幫我加上 this。(太神奇了)

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  keyword = "";

  constructor() {}

  keywordReset() {
    this.keyword = ""; // 清空輸入框
  }
}

雙向繫結方便規方便，但不是什麼情境都通用，因為在畫面與資料同步下效能會較低，如果網頁資料龐大，使用雙向繫結可能會變慢，不過也要看網頁設計而定。