如何使用 Angular 2 在 *ngFor 列表中显示单击的元素隐藏其他元素

Question

我希望 ngFof 中单击的元素显示 ngIf 隐藏的信息。现在单击图像，所有隐藏元素都会显示。如何显示单击图片的信息？

我在示例中没有使用 jquery，因为我无法让它工作。在接受其他解决方案之前，我希望了解如何在 Angular2 中做到这一点。 笨蛋

 @Component({

  selector: 'hello-world',
  template: 'src/hello_world.html',
  directives: [FORM_DIRECTIVES, CORE_DIRECTIVES]

})
export class HelloWorld {

    clicked() {// only show clicked img info 
      e=event.target;
      console.log(e);
      this.show=!this.show;
  };

  info = [{
    data: "information for img1:",
    data2: "only the info img1 is displayed"
  },
    {
      data: "information for img2:",
      data2: "only the info for img2 is displayed"
    },
    {
      data: "information for img3:",
      data2: "only the  info for img3 is displayed"
    }]
}

<div  *ngFor="#x of info">
<img src="http://lorempixel.com/150/150"  (click)="clicked($event)" >


  <div *ngIf="show">
      <div class="names">
        <div class="fullName">{{x.data}}</div>
        <div>{{x.data2}}</div>
      </div>
    </div>
</div>

我发现这篇文章有类似的问题，尽管我无法在我的代码中实现它。 Angular2 获取对在 ngfor 中创建的元素的引用

Answer 1

每行数据应该使用 var show：这是我的代码：

    export class HelloWorld {
      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"
    }]


}

并在html中

<h3>How to show info of clicked image only </h3>

<div  *ngFor="#x of things;#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>

https://plnkr.co/edit/SR2Iguzrgd6DpquCZygc?p=preview