CODEWITHSUNDEEP
angularionic-frameworkionic2ionic3
user2828442
user2828442

Reputation: 2515

Need to show counter inside ngif in Ionic

I am fetching data from API on HTML using ngFor, but filtering with ngIf, see below home.html code.

{{list.i}} is showing me the array position number (17,18,19...), but I want to show 1,2,3,4.., how do I do that?

 <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>

Upvotes: 0

Views: 2217

Answers (3)

dev_in_progress
dev_in_progress

Reputation: 2494

In constructor or when you populate display array filter data with that condition and then loop thrue filtered data:

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>

Upvotes: 0

Vivek Doshi
Vivek Doshi

Reputation: 58553

I think here it is what you need

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 }} <br/> 
  id -> {{ user.id}} <br/>
  <hr/>
</div>

WORKING DEMO

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222582

You should compare as ===

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

and

<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>

Upvotes: 0

Related Questions