Angular：在同一模板的多表格中重置索引值

我明白你的问题了：两个表格共用同一个父级数据源，但每个表格只显示符合特定条件的行，现在需要让每个表格内的行索引从1开始连续递增，而不是沿用整个数据源数组的原始索引（因为过滤后会出现断号）。

问题的核心在于：你原来的*ngFor是遍历整个reportingData.RecommendationData数组，再用*ngIf过滤掉不符合条件的行，此时循环的索引（i/j）是整个数组的原始索引，不是过滤后行的连续索引。要解决这个问题，我们需要先拿到每个表格对应的过滤后的数据子集，再遍历这个子集，这样索引自然就是连续的了。

下面提供两种可行的解决方案：

方案一：组件内预处理过滤数据（推荐，性能更优） #

这种方式会在组件中提前过滤好两个表格需要的数据，避免模板中重复执行过滤逻辑，减少变更检测的性能开销。

步骤1：在组件类中定义过滤后的数据源 #

在你的组件.ts文件中，添加两个属性来存储过滤后的数据：

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

@Component({
  // 你的组件元数据（选择器、模板路径等）
})
export class YourComponent implements OnInit {
  reportingData: any; // 你的父级数据源
  swRecommendationRows: any[] = []; // 软件推荐表格的过滤后数据
  licenseRecommendationRows: any[] = []; // 许可证推荐表格的过滤后数据

  ngOnInit(): void {
    // 假设你在这里获取到了reportingData数据（比如从接口请求或服务获取）
    // 过滤出符合两个表格条件的行
    this.swRecommendationRows = this.reportingData.RecommendationData.filter(row => row.swRecommendations);
    this.licenseRecommendationRows = this.reportingData.RecommendationData.filter(row => row.licenseRecommendations);
  }
}

步骤2：修改模板遍历过滤后的数组 #

第一个表格（软件推荐）：

<tbody>
  <tr *ngFor="let row of swRecommendationRows; let i=index">
    <td>{{i + 1}}</td>
    <td>{{row.swRecommendations.deviceID}}</td>
  </tr>
</tbody>

第二个表格（许可证推荐）：

<tbody>
  <tr *ngFor="let row of licenseRecommendationRows; let j=index">
    <td>{{j + 1}}</td>
    <!-- 这里渲染licenseRecommendations的内容 -->
  </tr>
</tbody>

方案二：模板内直接过滤（快速实现，适合简单场景） #

如果不想修改组件逻辑，也可以直接在模板中对数据源进行过滤后再遍历。注意：这种方式在数据频繁变更的场景下可能会有性能问题，因为每次变更检测都会重新执行过滤函数。

第一个表格：

<tbody>
  <ng-container *ngFor="let row of reportingData.RecommendationData.filter(r => r.swRecommendations); let i=index">
    <tr>
      <td>{{i + 1}}</td>
      <td>{{row.swRecommendations.deviceID}}</td>
    </tr>
  </ng-container>
</tbody>

第二个表格：

<tbody>
  <ng-container *ngFor="let row of reportingData.RecommendationData.filter(r => r.licenseRecommendations); let j=index">
    <tr>
      <td>{{j + 1}}</td>
      <!-- 这里渲染licenseRecommendations的内容 -->
    </tr>
  </ng-container>
</tbody>

为什么原来的方式不行？ #

举个简单例子：假设你的RecommendationData数组有5项，其中第1、3、4项有swRecommendations，原来的i会是0、2、3，显示的索引就是1、3、4，不是连续的1、2、3。而过滤后遍历的是这3项组成的子集，此时i是0、1、2，+1后就是完全连续的计数了。

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