Ionic中如何为筛选后的列表添加序号显示？

我来帮你搞定这个需求！你现在遇到的问题主要是模板里的条件判断错误和序号使用不当，咱们一步步修正：

1. 先修正核心错误 #

你在模板的*ngIf里写了list.ENTUSR='kiran'，这是赋值操作而不是判断相等，应该改成全等判断list.ENTUSR === 'kiran'，不然会把所有item的ENTUSR都改成kiran，这肯定不是你想要的。

另外，你写的{{list.i}}是错误的，i是ngFor里的索引变量，不是list对象的属性，直接用{{i + 1}}就能得到从1开始的序号（因为索引默认从0开始）。

2. 优化代码（推荐方案） #

更高效的做法是把筛选逻辑移到TS文件里，而不是在模板里用*ngIf判断，这样能减少模板的渲染负担：

修正后的.ts文件 #

this._servall.myservice(this.taskdesc).subscribe(data=> { 
  // 直接在获取数据后筛选出ENTUSR为'kiran'的条目
  this.display = data.filter(item => item.ENTUSR === 'kiran'); 
});

修正后的.html文件 #

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

3. 如果一定要在模板里筛选（不推荐） #

如果你暂时不想改TS代码，也可以直接修正模板，但要注意：这里的序号会因为筛选跳过部分索引，比如原数据第0条不是kiran、第1条是，序号会显示2，所以还是推荐先在TS里筛选来保证序号连续：

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

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