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> 会根据控制器或作用域提供的集合渲染列表。如果 items 的值为 ['Apple', 'Banana', 'Cherry']，页面就会为每种水果显示一个列表项。这是 AngularJS 指令，不是现代 Angular 的语法。

在现代 Angular 中使用 @for 渲染列表

对于所用版本支持 @for 区块的现代 Angular 项目，可以在列表元素中使用模板语法 @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 循环。两者都不是模板渲染指令。

如何向显示的集合中添加项目？

更新组件或控制器所持有的集合，然后由相应的模板语法渲染当前值。具体的更新方式取决于应用管理状态的方法。