Angular中如何为过滤后的渲染元素输出连续项索引？

安全阿岳

2026-8-15

解决方案：Angular过滤数组后显示连续索引

问题说明

现有数组数据，需在Angular模板中仅显示length大于0的项，但当前使用*ngFor的index获取的是原数组索引，无法得到过滤后的连续索引，需要修正为连续序列。

可行方案

方案1：组件内预先过滤数组（推荐）

在组件TypeScript代码中先过滤出符合条件的项，模板直接遍历过滤后的数组，此时index即为连续索引。

组件代码：

// 原数组
lists = [
    { item: 1, length: 4 },
    { item: 2, length: 0 },
    { item: 3, length: 3 },
    { item: 4, length: 0 },
    { item: 5, length: 3 },
];

// 过滤后的数组
filteredLists = this.lists.filter(item => item.length > 0);

模板代码：

<ul *ngFor="let list of filteredLists; let i = index">
  <li>{{ list.item }} INDEX #{{ i }}</li>
</ul>

方案2：使用自定义过滤管道

通过Angular自定义管道实现数组过滤，模板中通过管道处理原数组后遍历，index会自动对应过滤后的连续索引。

创建自定义管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'filterNonZeroLength' })
export class FilterNonZeroLengthPipe implements PipeTransform {
  transform(items: Array<{item: number; length: number}>): Array<{item: number; length: number}> {
    return items.filter(item => item.length > 0);
  }
}

在模块中声明该管道（需添加到declarations数组）。
模板中使用管道：

<ul *ngFor="let list of lists | filterNonZeroLength; let i = index">
  <li>{{ list.item }} INDEX #{{ i }}</li>
</ul>

方案3：模板内手动计数（不推荐，变更检测易出问题）

在组件中声明计数变量，模板内仅在符合条件时累加计数：

组件代码：

filteredIndex = 0;
lists = [/* 原数组数据 */];

模板代码：

<ul>
  <ng-container *ngFor="let list of lists">
    <li *ngIf="list.length">
      {{ list.item }} INDEX #{{ filteredIndex }}
    </li>
    <ng-container *ngIf="list.length">{{ filteredIndex = filteredIndex + 1 }}</ng-container>
  </ng-container>
</ul>