Angular 2使用Filter Pipe后表格索引不显示问题求助

我来帮你一步步解决这个问题，先搞定索引显示的核心需求，再梳理Pipe筛选的逻辑问题：

你遇到的索引消失问题，本质是***ngFor的index是基于过滤后数组生成的**，不是原数组的索引。如果要保留原数据的索引，不能依赖模板里的循环索引，得把原索引和数据绑定在一起。

举个具体的实现方式：

1. 在组件里预处理数据，把原数组的每个元素和它的索引包装成新对象：

// 你的组件.ts文件
originalData = [/* 这里是你的原始表格数据 */];
// 给每个数据项加上原索引字段
dataWithOriginalIndex = this.originalData.map((item, idx) => ({
  ...item,
  originalIndex: idx
}));

2. 在模板里使用这个包装后的数组，直接读取originalIndex字段：

<tr *ngFor="let item of dataWithOriginalIndex | yourFilterPipe: inputValue">
  <td>{{item.originalIndex}}</td> <!-- 这里永远显示原数组的索引 -->
  <td>{{item.yourDataField}}</td>
</tr>

这样不管Pipe怎么过滤数据，原索引都会跟着每个数据项走，肯定能正常显示。

现在每个数据项都带了originalIndex，你就不用纠结“HTML生成的索引传不到Pipe”的问题了，直接在Pipe里用这个字段做筛选逻辑就行。

比如你的Pipe可以这么写：

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

@Pipe({ name: 'filterByOriginalIndex' })
export class FilterByOriginalIndexPipe implements PipeTransform {
  transform(items: any[], targetIndex: string): any[] {
    // 先加日志排查，确认Pipe是否执行、参数是否正确
    console.log('Pipe接收的参数：', items, targetIndex);

    // 边界处理：没有数据或没有筛选值时返回原数组
    if (!items || !targetIndex) return items;

    const parsedIndex = parseInt(targetIndex, 10);
    // 筛选出原索引等于输入数字的项
    return items.filter(item => item.originalIndex === parsedIndex);
  }
}

然后在模板里关联输入框和Pipe：

<input type="number" [(ngModel)]="filterIndex">
<tr *ngFor="let item of dataWithOriginalIndex | filterByOriginalIndex: filterIndex">
  <td>{{item.originalIndex}}</td>
  <td>{{item.yourDataField}}</td>
</tr>

如果之前你的Pipe没有打印日志，大概率是这几个原因：

• 你没在模块里声明这个Pipe，Angular根本没加载它，自然不会执行
• 输入的筛选值是空的，Pipe直接返回原数组，你没注意到日志输出
• 原始数组是空的，或者筛选条件永远不满足，导致逻辑没走到日志那一步

可以先检查你的模块文件，确认Pipe已经被声明：

// app.module.ts
import { FilterByOriginalIndexPipe } from './filter-by-index.pipe';

@NgModule({
  declarations: [
    // ...你的其他组件、指令
    FilterByOriginalIndexPipe // 必须在这里声明
  ]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者Arūnas Vaitkus