Tengo varias secciones que contienen la imagen de información y los detalles, cuando hago clic en la imagen de información, los detalles específicos deben alternar. Todas las imágenes y divs están dentro del bucle. Todo funciona bien, pero cuando hago clic en otra imagen sin cerrar los detalles anteriores, permanece abierta. La sección anterior debería cerrarse cuando hago clic en otra imagen. Aquí está el código a continuación https://stackblitz.com/edit/angular-nrys31?file=src%2Fapp%2Fapp.component.html
<hello name="{{ name }}"></hello> <h3>How to show info of clicked image only </h3> <div *ngFor="let x of things; let i = index"> <img src="http://lorempixel.com/150/150" alt="loading" (click)="clicked(i)" > <div *ngIf="x.show"> <div class="names"> <div class="fullName">{{x.data}}</div> <div>{{x.data2}}</div> </div> </div> </div> import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Angular'; public show:boolean = false; clicked(index) {// only show clicked img info console.log(this.things[index]); this.things[index].show = !this.things[index].show; }; public things:Array<any> = [{ data: "information for img1:", data2: "only the info img1 is displayed", show: false }, { data: "information for img2:", data2: "only the info for img2 is displayed" }, { data: "information for img3:", data2: "only the info for img3 is displayed" }] }Cada vez que hace clic en cualquier imagen, está alternando la propiedad de mostrar solo de esa imagen.
this.things[index].show = !this.things[index].show;
Esto significa que si se abre cualquier imagen anterior, permanecerá abierta junto con otras imágenes.
Para resolver este problema, debe crear una variable que contendrá un índice de la imagen en la que se hizo clic y se usará para establecer la propiedad show de la imagen en falso cada vez que se haga clic en una nueva imagen.
Solución
Crear variable:
previousIndex: number = -1;Actualizar la función en la que se hizo clic
clicked(index) { // Checking if same picture clicked or new if (this.previousIndex >= 0 && this.previousIndex != index) { // If new picture is clicked then closing previous picture this.things[this.previousIndex].show = false; } // Updating index this.previousIndex = index; this.things[index].show = !this.things[index].show;}
puedes usar servicios angulares para almacenar things :
y usar propiedades como data y should_hide
@Injectable({ providedIn: 'root' }) export class YourServiceService { constructor( ) { this.things = [ { data: "yourData1", should_hide: false }, { data: "yourData2", should_hide: true }, ] y cambiarlo en función de should_hide en ngif dentro de ngfor
Aquí está stackblitz actualizado
https://stackblitz.com/edit/angular-ozjttg?file=src%2Fapp%2Fapp.component.ts