Ionic中ngFor结合ngIf过滤后如何显示连续序号？

首先得先纠正你代码里的一个关键错误：你的*ngIf="list.ENTUSR='kiran'"用的是赋值运算符=，这会把每一项的ENTUSR都强制设置为'kiran'，而且这个条件永远为真——相当于根本没起到过滤作用！正确的比较逻辑应该用严格相等运算符===：*ngIf="list.ENTUSR === 'kiran'"。

接下来解决序号不连续的核心问题：你现在用的i是原数组display的索引，而*ngIf只是跳过了不符合条件的项，并没有改变原数组的结构，所以索引还是原数组的原始位置，自然会出现17、18这种不连续的数字。下面给你两种实用的解决方案：

方案一：组件层面提前过滤数据（推荐） #

这种方法性能更优，逻辑也更清晰——先在组件的.ts文件里把需要展示的数据过滤好，再在模板里遍历过滤后的数组，此时的索引就是连续的了。

1. 在组件类中添加过滤后的数组：

// 假设你的display数组已经从API成功获取
filteredDisplay = this.display.filter(item => item.ENTUSR === 'kiran');

2. 修改home.html模板：

<ion-list no-lines *ngFor="let list of filteredDisplay; let i=index;">
  <ion-item text-wrap>
    {{i + 1}} {{list.ENTUSR}} {{list.DESCRPITION}}
  </ion-item>
</ion-list>

这里i + 1是因为数组索引从0开始，如果你想要从1起始的连续序号，就需要加1。

方案二：模板内用容器先过滤再遍历 #

如果不想修改组件逻辑，也可以用<ng-container>包裹原数组的遍历，在容器内部做过滤，同时通过计算得到连续序号。不过这种方法在数据量大的时候性能不如方案一，因为还是会遍历原数组的所有项。

示例代码：

<ion-list no-lines>
  <ng-container *ngFor="let list of display; let originalIndex=index;">
    <ion-item text-wrap *ngIf="list.ENTUSR === 'kiran'">
      {{ (display.slice(0, originalIndex).filter(item => item.ENTUSR === 'kiran').length) + 1 }} 
      {{list.ENTUSR}} {{list.DESCRPITION}}
    </ion-item>
  </ng-container>
</ion-list>

这个逻辑是：对当前项，先取原数组从开头到当前索引的切片，过滤出符合条件的项并获取其长度，再加1就是当前项在过滤后的连续序号。

总结来说，方案一是更优的选择，既解决了序号问题，又修复了你原来的赋值错误，同时还提升了页面渲染性能。

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