Angular 12+如何遍历数组指定范围而非整个数组？

1. 单独处理第一个元素，遍历剩余元素 #

先单独渲染第一个bar的特殊模板，再通过数组的slice(1)方法获取从第二个元素开始的子数组，用*ngFor遍历：

<!-- 特殊处理第一个bar -->
<div *ngIf="foo.bars.length > 0">
  <!-- 这里写第一个bar的特殊逻辑 -->
  {{ foo.bars[0] }}
</div>

<!-- 遍历从第二个开始的所有元素 -->
<div *ngFor="let bar of foo.bars.slice(1)">
  <!-- 处理后续bar的内容 -->
  {{ bar }}
</div>

2. 截取指定范围的元素（如第2到第10个） #

利用数组的slice(startIndex, endIndex)方法，注意结束索引是排他的，如果要取到第10个元素（对应索引9），结束索引要设为11：

<!-- 遍历索引1到9的元素（即第2到第10个） -->
<div *ngFor="let bar of foo.bars.slice(1, 11)">
  <!-- 处理bar内容 -->
  {{ bar }}
</div>

进阶：用组件计算属性简化模板 #

如果需要多次复用或逻辑复杂，可以在组件类中定义计算属性，让模板更简洁：

// 组件.ts文件
get remainingBars() {
  // 处理foo或bars为空的情况，避免报错
  return this.foo?.bars?.slice(1) || [];
}

get rangeBars() {
  return this.foo?.bars?.slice(1, 11) || [];
}

模板中直接使用：

<div *ngFor="let bar of remainingBars">...</div>
<div *ngFor="let bar of rangeBars">...</div>

内容的提问来源于stack exchange，提问作者Vihung