时间戳

首页 > 解决方案 > 如何在我的 img 标签中包含点击图像的索引？

html - 如何在我的 img 标签中包含点击图像的索引？

问题描述

我是离子的新手。我使用的是 Ionic Framework 版本 5.4.16，并且我使用的是 Windows 10。

以下代码列出了我在 Firebase 中的所有图像。当我单击任何图像时，我想将其定向到我的“订单”页面并仅显示该特定图像。此代码来自我的 gallery.html 文件。

<ion-item *ngFor="let booking of Bookings" class="user-list">
    <div class="card"><h2><ion-img id="img" width="250" height="160" src={{booking.image1}} [routerLink]="['/order']"></ion-img></h2>
    </div>
</ion-item>

此代码来自我的 order.html 文件。

<ion-item *ngFor="let booking of Bookings; index as indexOfelement;" class="user-list" >
    <div class="scrolling-wrapper">
        <div class="card"><ion-img id="img" width="250" height="160" src={{booking.image1}}></ion-img>                </div>
        <div class="card"><h2><ion-img id="img" width="250" height="160" src={{booking.image2}}></ion-img></h2></div>
        <div class="card"><h2><ion-img id="img" width="250" height="160" src={{booking.image3}}></ion-img></h2></div>
    </div>

我将不胜感激任何帮助。谢谢你。

标签： htmlangularionic-framework

解决方案

“如果项目设置了 href 或按钮属性，则该项目被视为“可点击””，您可以在此文档中查看更多信息：https ://ionicframework.com/docs/api/item ，

您可以将点击按钮添加到您的元素：

<ion-item *ngFor="let booking of Bookings; index as indexOfelement;" class="user-list" >
    <div class="scrolling-wrapper" (click)="openUser(item)">
        <div class="card"><ion-img id="img" width="250" height="160" src={{booking.image1}}></ion-img>                </div>
        <div class="card"><h2><ion-img id="img" width="250" height="160" src={{booking.image2}}></ion-img></h2></div>
        <div class="card"><h2><ion-img id="img" width="250" height="160" src={{booking.image3}}></ion-img></h2></div>
    </div>

推荐阅读