Clever Geek Handbook

How to display 3 <ion map> for each line that contains an image and number of increments per * ngFor

I am trying to create an Ionic 2 HTML page displaying 3 <ion-card>

for each line that contains a fixed image size and an increment number using *ngFor

as shown in the picture.

3 <code> </ - namecard </code> <br> <script async src=
for string" data-src="/img/b0c576a15a6f312e70a41bb5df5baff6.png" class="lazyload" src="https://fooobar.com/undefined">

My HTML Code You Might Need

<ion-row>
  <ion-col *ngFor="let l of list1 | async">
    <ion-card (press)="delete(l.$key)">
      <img src="{{l.url}}"/>
    </ion-card>
  </ion-col>
</ion-row>
+3


source share


1 answer


You can set the index of the variable, which increases with each loop *ngFor

. Just add let i = index

to yours *ngFor

. Your code has been edited:

<ion-row>
  <ion-col *ngFor="let l of list1 | async; let i = index">
    <ion-card (press)="delete(l.$key)">
      <img src="{{l.url}}"/>
      <p>Image {{i}}</p>
    </ion-card>
  </ion-col>
</ion-row>


EDIT:

<ion-grid>
  <ion-row>
    <ion-col>
     <ion-card>
       Your first card content
     </ion-card>
    </ion-col>
    <ion-col>
     <ion-card>
       Your second card content
     </ion-card>
    </ion-col>
    <ion-col>
     <ion-card>
       Your third card content
     </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>
+2


source






More articles:


All Articles