今日目標

了解 Angular 的 插值 (Interpolation) 和 結構指令 *ngFor

在元件的 .ts 檔裡定義 skills 與 projects 陣列

用 *ngFor 在 .html 裡自動產生清單

學會把資料跟樣板分開，讓維護更簡單

基礎概念：什麼是 Data Binding？

在純 HTML 裡，你要顯示一段文字，就只能直接寫死：

但在 Angular 裡，我們可以這樣做：

然後在 .ts 檔裡宣告：

name = 'Chiayu';

👉 Angular 會自動把 name 的值顯示在畫面上。
這種 {{ }} 的語法就叫 插值 (Interpolation)。

基礎概念：*ngFor

如果我們有一個清單：

skills = ['HTML', 'CSS', 'TypeScript'];

在 .html 裡，我們可以用 *ngFor 迴圈：

👉 Angular 會自動幫我們把陣列每一項都渲染成 。

實作：把 Skills / Projects 資料化

1. 修改 skills.component.ts
   import { Component } from '@angular/core';

@Component({
selector: 'app-skills',
templateUrl: './skills.component.html',
styleUrls: ['./skills.component.scss']
})
export class SkillsComponent {
skills = [
{ name: 'HTML / CSS / SCSS', category: 'frontend' },
{ name: 'TypeScript', category: 'frontend' },
{ name: 'Angular / React / Vue', category: 'frontend' },
{ name: 'Node.js / Express', category: 'backend' },
{ name: 'Git / GitHub / Docker', category: 'tools' },
{ name: 'Vite / Webpack', category: 'tools' }
];
}

2. 修改 skills.component.html

👉 現在如果要新增技能，只要在 .ts 裡加一筆資料，畫面會自動更新。

3. 修改 projects.component.ts
   import { Component } from '@angular/core';

@Component({
selector: 'app-projects',
templateUrl: './projects.component.html',
styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent {
projects = [
{
title: '毛毛購物（寵物電商）',
desc: '主導前端架構，完成商品列表、購物流程與訂單頁。',
tech: 'Angular + Node.js｜購物車、結帳、RWD',
link: '#'
},
{
title: 'LINE Bot 預約系統',
desc: '整合 LINE 聊天介面與雲端排程，完成會員預約流程。',
tech: 'Cloud Functions + LINE API｜時段預約',
link: '#'
}
];
}

4. 修改 projects.component.html

👉 這樣「專案卡片」也不需要死寫 HTML 了。

成果

Skills 區域的清單是由 TypeScript 陣列渲染出來

Projects 區域的卡片同樣由資料驅動

新增、刪除技能或專案 → 只改 .ts 的陣列，不用動 HTML

網站正式變成「資料驅動 UI」

小心踩雷（常見錯誤）

忘了在 .ts 裡加 export class

Angular 元件必須 export 才能用

用 = 當成比對，而不是 *ngFor

❌ <li *ngFor="let skill = skills">

✅ <li *ngFor="let skill of skills">

不小心改到 index.html

記得資料綁定只會在 component.html 生效

忘記中括號 [href]

如果用字串插值：href="{{ project.link }}"

如果用屬性綁定：[href]="project.link"

兩種都可以，但推薦第二種（Angular 官方建議用法）

下一步（Day 10 預告）

明天，我們要學 Angular 的事件綁定 (Event Binding)：

讓按鈕點擊可以觸發方法

幫「更多介紹」加上 Angular 事件，而不是用原生 JS

幫「技能分類」加上點擊篩選功能（搭配今天的資料綁定）