需要在离子中显示 ngif 内部的计数器

Question

我正在使用ngFor从HTML上的API获取数据，但使用ngIf过滤，请参见下面的home.html代码。

{{list.i}}向我显示阵列位置编号 (17,18,19...(，但我想显示 1,2,3,4..，我该怎么做？

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

Answer 1

我认为这就是你需要的

组件侧 ：

getUsers(users , name){
    return users.filter((user) => user.name === name);
}

模板侧 ：

<div *ngFor="let user of getUsers(users,'Vivek');let i = index;">
  index -> {{ i + 1 }} <br/> 
  id -> {{ user.id}} <br/>
  <hr/>
</div>

工作演示

Answer 2

你应该比较===

 <ion-item  text-wrap *ngIf="list.ENTUSR==='kiran'">

和

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

Answer 3

在构造函数中，或者当您使用该条件填充显示数组筛选器数据，然后循环遍历筛选的数据时：

displayKiran = [];
constructor() {
  this.displayKiran = this.display.filter(dis => {
     return dis.name == 'kiran';
  });
}
<ion-list no-lines *ngFor="let list of displayKiran;let i=index;" >
    <ion-item  text-wrap>
        {{list.i}} {{list.ENTUSR}} {{list.DESCRPITION}}
    </ion-item> 
</ion-list>