Angular中如何实现*ngFor索引每次递增2遍历目标元素

你之前使用item[index].whatever无效的核心原因：*ngFor遍历上下文里的item是当前轮次取出的单个元素，不是原始数组对象，不支持下标索引访问。以下是三种可落地的实现方案，按推荐优先级排序：

方案1：组件侧预过滤目标元素（最优实践） #

Angular官方不推荐在模板中写复杂的遍历/判断逻辑，这种方式可维护性、性能表现最好：

1. 在组件TypeScript文件中提前过滤出所有索引为偶数的目标元素：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html'
})
export class YourComponent {
  // 你的原始待渲染列表
  items: Array<{whatever: string}> = [];

  // 过滤出索引为偶数的元素（对应你要的第1、3、5...个展示项）
  get renderItems() {
    return this.items.filter((_, index) => index % 2 === 0);
  }
}

2. 模板中直接正常遍历过滤后的列表即可，不需要额外处理索引：

<!-- 遍历过滤后的列表，直接访问元素属性 -->
<div *ngFor="let item of renderItems">
  {{ item.whatever }}
</div>

方案2：模板内加索引判断（适合小数据量场景） #

如果列表长度很小、不想改动组件逻辑，可以在模板中通过索引判断跳过奇数项，注意用ng-container做包裹层避免生成多余DOM节点：

<ng-container *ngFor="let item of items; let i = index">
  <!-- 仅当索引为偶数时渲染当前项 -->
  <div *ngIf="i % 2 === 0">
    {{ item.whatever }}
  </div>
</ng-container>

注意：该方案会遍历数组所有元素，仅跳过奇数项的渲染，列表长度超过100条时不推荐使用，会产生不必要的性能开销。

方案3：生成步长为2的索引序列（完全匹配C语言循环逻辑） #

如果需要严格实现i += 2的遍历逻辑、不遍历多余元素，可以提前生成符合步长要求的索引数组，再通过索引取原始数组的对应元素：

1. 组件中生成步长为2的索引列表：

get stepIndexes() {
  const indexes: number[] = [];
  for(let i = 0; i < this.items.length; i += 2) {
    indexes.push(i);
  }
  return indexes;
}

2. 模板中遍历索引，直接取原始数组对应项：

<div *ngFor="let i of stepIndexes">
  {{ items[i].whatever }}
</div>

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