Блог

Главная - Вопросы по программированию - Как я могу включить индекс выбранного изображения в свой тег img?

Как я могу включить индекс выбранного изображения в свой тег img?

#html #angular #ionic-framework

#HTML #угловатый #ионный каркас

Вопрос:

Я новичок в Ionic. Я использую 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>

Я был бы признателен за любую помощь. Спасибо.

Ответ №1:

«Элемент считается «интерактивным», если у него есть свойство href или button», вы можете проверить больше здесь, в этой документации: 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>
Метки: