Javascript 如何在*NG2列表中显示单击的元素以隐藏其他元素

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

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

@组件({
选择器：“你好，世界”，
模板：“src/hello\u world.html”，
指令：[形式指令，核心指令]
})
导出类HelloWorld{
单击（）{//仅显示单击的img信息
e=事件目标；
控制台日志（e）；
this.show=！this.show；
};
信息=[{
数据：“img1信息：”，
数据2：“仅显示信息img1”
},
{
数据：“img2信息：”，
数据2：“仅显示img2的信息”
},
{
数据：“img3信息：”，
数据2：“仅显示img3的信息”
}]
}

{{x.data}}
{{x.data2}}

我发现这篇文章也有类似的问题，尽管我无法在代码中实现它。

---

每行数据应使用var

显示

： 这是我的密码：

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


}

导出类HelloWorld{
公共显示：布尔值=假；
单击（索引）{//仅显示单击的img信息
console.log（this.things[index]）；
this.things[index].show=！this.things[index].show；
};
公开内容：数组
尽管我想在这个问题上加上我的2美分，主要是因为如果您从
api
获取数据，您将无法在不首先推到数组上以及希望更轻松地切换元素的情况下操作数据以使其具有布尔属性

*ngFor
可以用一个简单的
*ngFor=“let item of items；let i=index”
保存索引。因此，当我们最初点击
（单击）
操作时，我们可以很容易地找到正在处理的索引，并将该索引传递给方法
（单击）=“action（i）”

然后，该方法可以在要显示和隐藏的元素中的
*ngIf
的条件中指定一个变量

action(index){
   this.showElement = index; // assign variable to a number to be used in 
                             // a conditional on the *ngIf
}

我们现在有了一个与单击的索引相等的变量，因此可以基于变量和
*ngFor
中的索引循环创建一个条件

<div *ngIf="showElement === i"> Toggled visibility element </div>

html

<div *ngFor="let x of things; let i = index">
   <img src="http://lorempixel.com/150/150" alt="loading" (click)="clicked(i)" >  

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


{{x.data}}
{{x.data2}}

不确定是否有更好的方法，只是不要认为操纵数据是解决视图功能的最佳方法。
如果“things”数据来自外部资源，如何在不向“things”添加“show:false”属性的情况下实现这一点数组？@dieuhd你有一个很好的解决方案，但是在选择其他人时打开的信息不会关闭。@JS_宇航员：你不需要在
东西中显示declera
show
。那么好了，现在如何只打开单击的信息并关闭以前单击的信息。如果有人想知道的话。@JS_宇航员：你可以使用
prevClicked
要保存以前单击的
索引
。单击图像时，您将以前单击的图像的
显示
值设置为
假
。我已更新了我的plunker
export class HelloWorld {
   public show:number;

   constructor(){}

   clicked(index){
      this.show = index;
   };
}

<div *ngFor="let x of things; let i = index">
   <img src="http://lorempixel.com/150/150" alt="loading" (click)="clicked(i)" >  

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