CODEWITHSUNDEEP
javascriptangulartypescriptionic-frameworkionic3
James Legg
James Legg

Reputation: 98

Having problems with Ionic/Angular ngFor through an array

I am having some problems with ngFor and cannot find my solution from other questions, if anyone could offer some advice that would be extremely helpful.

My current code is this:

 <ion-list *ngIf="items.length">
 <ion-item-sliding style="background-color: #ff2d85" #item>
 <ion-item *ngFor="let item of items; let i = index">
 <ion-avatar item-start><img src="../../assets/imgs/{{item.prodAvatar}}">
 </ion-avatar>
 <h2 id=prod{{i}}Title>{{item.prodTitle}}</h2>
 <h3 id=prod{{i}}Desc>{{item.prodDesc}}</h3>
 <p id=prod{{i}}Little>{{item.prodLittle}}</p>
 <button id="bt{{i}}" ion-button outline item-end class="listbutton" 
 (click)="cart([i])"><ion-icon name="basket"></ion-icon></button>
 </ion-item>
 <ion-item-options side="right">
 <button ion-button expandable></button>
 </ion-item-options>
 </ion-item-sliding>
 <ion-item>
  <button ion-button>NEW PAGE</button>
  <button ion-button secondary menuToggle>MENU</button>
  <button (click)="openVibrate()" ion-button>VIBRATE</button>
  <button (click)="openCamera()" ion-button>CAMERA</button>
 </ion-item>
 </ion-list>

This displays my data fine, except for the problem that the slider on the list only slides on the first object in this list, which is obvious as the sliding element is outside of the for loop. But, when I place the ngFor in the <ion-item-sliding>, all data using {{i}}, still remains, but the data using {{item.anything}} is now blank.

The solution may be clear as day, but I cannot see what it is

Can anybody offer any insight?

Upvotes: 1

Views: 487

Answers (1)

amin arghavani
amin arghavani

Reputation: 1883

You need to use ngFor in ion-item-sliding tag.

<ion-item-sliding *ngFor="let item of items; let i = index" style="background-color: #ff2d85" #item1>

Upvotes: 1

Related Questions