如何通过*ngFor显示每一行包含图像和增量号的3<离子卡>
如何通过*ngFor显示每一行包含图像和增量号的3<离子卡>
提问于 2017-08-06 15:49:43
我试图设计Ionic 2 HTML页面，通过使用如图片中所示的<ion-card>，每一行显示3<ion-card>，其中包含固定的图像大小和增量数。
我的HTML代码你可能需要它
<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>Stack Overflow用户
回答已采纳
发布于 2017-08-06 16:21:45
您可以设置一个变量索引，该索引在每个*ngFor循环中递增。只需在您的let i = index上添加*ngFor即可。您的代码已编辑：
<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>编辑：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45533768
复制相关文章
相似问题
腾讯云开发者
