どのように表示する3 <ion-card>イメージとインクリメント番号を含む行ごとに* ngFor

Question

*ngForで示されるように固定イメージのサイズとインクリメント番号を含む行ごとに3 <ion-card>を表示するIonic 2 HTMLページを設計しようとしています絵。

私のHTMLコードあなたは、各*ngForループで増分される変数のインデックスを設定することができ

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

Answer 1

それが必要な場合があります。 *ngForにlet i = indexを追加するだけです。あなたのコードは、編集：

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