Angular 筆記 - 雙向繫結 Two-way Binding

基礎認識

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

同步綁定

使用情境大多在表單

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

HTML 標籤

1	<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 這個屬性。

所以要將 FormModule 其匯入 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], // 加到 import
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

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

最後在 import ~~複製貼上~~增加 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 = ""; // 清空輸入框
  }
}

DEMO: https://stackblitz.com/edit/angular-ivy-5kjeyt?embed=1&file=src/app/app.component.html

補充

後有用 Vue 開發一小段時間，對照於 Angular 的位置，在建構式上方宣告的變數內容，同等於是 Vue 的 data 物件，下方的方法，就同等於 methods 物件，所以方法內要使用變數，記得要加上 this。

小結

雙向繫結方便歸方便，大多使用在表單情境，因為在畫面與資料同步下效能會較低，如果網頁資料龐大，使用雙向繫結可能會變慢，不過也要看網頁設計而定，若觀念有誤還請不吝指教。