如何在单击角度 11 中来自 ngfor 循环的图像时切换特定 div

Question

我有多个包含信息图像和详细信息的部分，当我单击信息图像时，特定详细信息应该切换。所有图像和 div 都在循环内。一切正常，但是当我单击另一个图像而不关闭以前的详细信息时，它保持打开状态。当我单击其他图像时，上一部分应该关闭。这是下面的代码 https://stackblitz.com/edit/angular-nrys31?file=src%2Fapp%2Fapp.component.html

app.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>

app.component.ts

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"
    }]
}

Answer 1

当您点击任何图像时，您只会切换该图像的显示属性。

this.things[index].show = !this.things[index].show;

这意味着，如果打开任何先前的图像，它将与其他图像一起保持打开状态。

要解决这个问题，您必须创建一个变量来保存被点击图像的索引，并用于将图像的 显示属性 设置为 false新图片将被点击。

解决方案

• 创建变量：

  • previousIndex: number = -1;

• 更新点击函数

    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;
  

  }

Stackblitz Demo

Answer 2

你可以使用角度服务来存储things：

并使用 data 和 should_hide 等属性

@Injectable({
  providedIn: 'root'
})
export class YourServiceService {
  constructor( ) {

    this.things = [
      {  data: "yourData1", should_hide: false },
{  data: "yourData2", should_hide: true },
]
   

并根据 ngif 内 ngfor 内的 should_hide 切换它

这里是更新的堆栈闪电战

https://stackblitz.com/edit/angular-ozjttg?file=src%2Fapp%2Fapp.component.ts