首页 文章

需要在Ionic中显示ngif内的计数器

提问于
浏览 次
0

我使用 ngFor 从HTML上获取数据，但是使用 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>
angular ionic-framework ionic2 ionic3

3 回答

  • 0

    我想这就是你需要的

    Component Side :

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

    Template Side :

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

    WORKING DEMO

    回复于
  • 1

    你应该比较为 ===

    <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>
    回复于
  • 0

    在构造函数中或当您使用该条件填充显示数组过滤器数据然后循环thrue过滤数据时：

    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>
    回复于

相关问题