Angular 中的 for 迴圈

Angular 有兩種不同的範本 API：AngularJS 使用 ng-repeat；現代 Angular 則可在支援該語法的版本中使用 @for 區塊。在應用程式邏輯中處理 JavaScript 陣列時，請使用 for 迴圈或 forEach；這些方法會處理資料，本身不會產生範本元素。

選擇迴圈前，先確認 Angular 版本

請先確認專案使用哪個框架。AngularJS 是較早期的框架，使用 ng-repeat 指令來呈現集合中的項目。現代 Angular 使用不同的範本系統；若專案所用的 Angular 版本支援 @for，就可以使用這個區塊來呈現集合。加入之前，請先確認專案版本支援的語法。

如果需要計算、轉換或以其他方式處理值，JavaScript 的 for 迴圈或 forEach 適合用在元件或控制器邏輯中。若要呈現集合，請使用符合該框架的範本 API。

在 AngularJS 中使用 ng-repeat 呈現清單

在 AngularJS 範本中，ng-repeat="item in items" 會為 items 中的每個值建立一份元素。例如，範本片段 <ul><li ng-repeat="item in items">{{ item }}</li></ul> 會使用控制器或 scope 提供的集合來呈現清單。若 items 的值是 ['Apple', 'Banana', 'Cherry']，頁面就會為每種水果顯示一個清單項目。這是 AngularJS 指令，不是現代 Angular 的語法。

在現代 Angular 中使用 @for 呈現清單

若現代 Angular 專案所用的版本支援 @for 區塊，就可以在清單元素中使用範本 @for (item of items; track item.id) { <li>{{ item.name }}</li> }。其中，items 是元件的集合，item 是目前處理的記錄，而 track item.id 會在集合變動時，為每筆記錄提供穩定的識別方式。請使用資料中的唯一鍵，並依元件實際使用的屬性名稱調整範例。本文僅示範語法，並未在 Angular 專案中執行；請依照專案使用的版本和範本設定確認語法。

使用 JavaScript 的 for 和 forEach 處理陣列

若需要在應用程式邏輯中計算或轉換值，可以使用命令式 JavaScript 迴圈。以下範例會計算一組價格的總和。這是獨立的 JavaScript 示範，本文未執行此範例。

const items = [
  { name: 'Notebook', price: 4 },
  { name: 'Pen', price: 2 }
];

let total = 0;
for (const item of items) {
  total += item.price;
}

console.log(`Total: $${total.toFixed(2)}`);

迴圈會讀取每個項目，並將其價格加到 total；最後一行則會將格式化後的金額傳送到 JavaScript 主控台。另一種做法是使用 forEach 回呼函式，對陣列中的每個項目執行操作，例如 items.forEach(item => console.log(item.name))。處理資料時可使用其中任一種方式；若目標是在範本中呈現元素，則應使用 ng-repeat 或專案版本支援的 @for 區塊。

依照任務選擇迴圈方式

範本指令和區塊會將集合資料連結到呈現出的元素。JavaScript 迴圈則用來執行應用程式邏輯；若要變更資料，應透過範本所使用的元件或控制器狀態進行。

Angular 迴圈常見問題

現代 Angular 可以使用 ng-repeat 嗎？

ng-repeat 是 AngularJS 指令。現代 Angular 使用自己的範本語法，包括支援該語法的版本所提供的 @for。

可以在 Angular 元件中使用 JavaScript 的 for 迴圈嗎？

可以。可在元件邏輯中使用它來計算或處理其他陣列資料。但它不會建立範本元素；請將處理結果繫結至範本，再使用該範本的呈現語法。

什麼時候該使用 forEach？

需要對陣列中的每個項目執行回呼函式時，可以使用 forEach。若邏輯需要明確控制迭代過程，則可選擇一般的 for 迴圈。兩者都不是範本呈現指令。

如何在顯示中的集合新增項目？

更新元件或控制器所持有的集合，再由相應的範本語法呈現目前的值。實際的更新方式取決於應用程式管理狀態的方法。