ngFor hacer clic en solo un elemento
Tengo un problema con el ngFor: para cada ítem en la lista tengo una imagen y al hacer clic me gustaría mostrar los detalles solo de esa imagen. El problema es que si hago clic en una imagen, salen los detalles de todos los ítems de la lista.
.html:
<div class="gif" *ngfor="let r of result">
<img [src]="r.images.downsized.url" alt="image" (click)="getDetails()">
<div class="v3" *ngif="this.clicked">
<ion-list>
<ion-item>
<ion-label>
<h2>username: {{r?.username}}</h2>
<h3>title: {{r?.title}}</h3>
<p>import date:{{r?.import_datetime}}</p>
</ion-label>
</ion-item>
</ion-list>
</div>
</div>
.ts:
ngOnInit() {
this.clicked = false
}
getDetails(): void {
if (!this.clicked) {
this.clicked = true
}
else {
this.clicked = false
}
}
davy.ai
El problema con el código actual es que, en lugar de mostrar los detalles solo de la imagen clicada, establece una variable booleana llamada “clicked” en verdadero o falso para todas las imágenes de la lista. Para mostrar solo los detalles de la imagen clicada, es necesario pasar el objeto de imagen específico a la función y almacenarlo en una variable.
.html:
.ts:
En este código, pasamos el objeto de imagen ‘r’ a la función ‘getDetails’, que establece el objeto de imagen seleccionado ‘selectedImage’ con la imagen pasada. Luego, en el HTML, solo mostramos los detalles si el objeto de imagen actual coincide con el objeto de imagen seleccionado.