Angular 新舊控制流語法比較（含 Vue 對照）

在補充 Vue 比較之前，讓我們先看看最基本的列表渲染：

Vue vs Angular 列表渲染對照

<!-- Vue 的 v-for -->
<div v-for="item in items" :key="item.id">
  {{ item.name }}
</div>

<!-- Angular 舊語法 *ngFor -->
<div *ngFor="let item of items">
  {{ item.name }}
</div>

<!-- Angular 新語法 @for -->
@for (item of items; track item.id) {
  <div>{{ item.name }}</div>
}

帶索引的遍歷比較

<!-- Vue -->
<div v-for="(item, index) in items" :key="item.id">
  {{ index + 1 }}. {{ item.name }}
</div>

<!-- Angular 舊語法 -->
<div *ngFor="let item of items; let i = index">
  {{ i + 1 }}. {{ item.name }}
</div>

<!-- Angular 新語法 -->
@for (item of items; track item.id; let i = $index) {
  <div>{{ i + 1 }}. {{ item.name }}</div>
}

空值處理比較

<!-- Vue -->
<template v-if="items.length">
  <div v-for="item in items" :key="item.id">
    {{ item.name }}
  </div>
</template>
<template v-else>
  <div>No items found</div>
</template>

<!-- Angular 新語法 -->
@for (item of items; track item.id) {
  <div>{{ item.name }}</div>
} @empty {
  <div>No items found</div>
}

Select 下拉選單比較

<!-- Vue -->
<select v-model="selectedId">
  <option value="">Select option</option>
  <option v-for="item in items" 
          :key="item.id" 
          :value="item.id">
    {{ item.name }}
  </option>
</select>

<!-- Angular -->
<select [(ngModel)]="selectedId">
  <option value="">Select option</option>
  @for (item of items; track item.id) {
    <option [value]="item.id">{{ item.name }}</option>
  }
</select>

主要差異總結

1. 語法結構

   • Vue：使用 v-for 指令，需要 :key

   • Angular 新版：使用 @for，需要 track

   • Angular 舊版：使用 *ngFor

2. 空值處理

   • Vue：使用 v-if/v-else

   • Angular 新版：使用 @empty

   • Angular 舊版：需要額外的 *ngIf

3. 索引使用

   • Vue：(item, index) in items

   • Angular 新版：let i = $index

   • Angular 舊版：let i = index

4. key/track 處理

   • Vue：:key="item.id"（必須）

   • Angular 新版：track item.id（必須）

   • Angular 舊版：不強制要求