隨記

Week 03 · Day 03 — 資料綁定：插值與屬性綁定

學習目標

  • 掌握插值 {{ }}
  • 掌握屬性綁定 [property]
  • 區分兩者用法與差異

重點

四種綁定總覽 | 綁定 | 語法 | 方向 | |------|------|------| | 插值 | {{ value }} | 類別 → 畫面 | | 屬性綁定 | [prop]="value" | 類別 → 畫面 | | 事件綁定 | (event)="handler()" | 畫面 → 類別 | | 雙向綁定 | [(ngModel)]="prop" | 畫面 ⇄ 類別 |

1. 插值（Interpolation） 

<h1>{{ title }}</h1>
<p>{{ count + 1 }}</p>          <!-- 可放簡單表達式 -->
<p>{{ user.name }}</p>

2. 屬性綁定（Property Binding） 

<img [src]="imageUrl">
<button [disabled]="isDisabled">Go</button>
<input [value]="name">
- 用 [屬性] 將類別值綁到 DOM 屬性 - 若用插值 src="{{ imageUrl }}" 在 HTML 屬性上通常也可，但 [] 是正規做法

命名意義 - HTML 內容顯示用 {{ }} - HTML 屬性/DOM 屬性設定用 [ ]

實作

export class BindingComponent {
  title = "Binding Demo";
  imageUrl = "assets/logo.png";
  isDisabled = false;
}

<h1>{{ title }}</h1>
<img [src]="imageUrl" width="60">
<button [disabled]="isDisabled">Click</button>
試著把 isDisabled 改成 true，按鈕會變成不能點。

作業

  • 用插值顯示一個類別屬性
  • 用屬性綁定設定 img 的 src 與按鈕的 disabled
  • 說出 {{ }} 與 [ ] 的差別