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

How to show clicked element in *ngFor list hiding others using Angular 2

本文关键字：元素 使用 Angular 其他 隐藏 单击 ngFor 列表 显示      更新时间：2023-09-26

我希望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-get-reference-to-element-created-in-ngfor

每行数据，应使用 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

尽管我会在这个问题上加上我的 2 美分，主要是因为如果您从api获取数据，您将无法在不首先推送数组的情况下操作数据以具有布尔属性以及想要更轻松地切换元素。

*ngFor可以通过简单的*ngFor="let item of items; let i = index"保存索引。因此，当我们最初点击(click)操作并将该索引传递给方法(click)="action(i)"时，我们可以轻松找到我们正在处理的索引。

然后，该方法可以分配一个变量，该变量可以在要显示和隐藏的元素的*ngIf中的条件中使用。 

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

我们现在有一个等于点击索引的变量，因此可以根据变量和索引在*ngFor中循环创建一个条件。所以在html我们可以添加

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

所以在OP发布的情况下

component 

export class HelloWorld {
   public show:number;
   constructor(){}
   clicked(index){
      this.show = index;
   };
}

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>

不确定是否有更好的方法，只是不要认为操作数据是解决视图功能的最佳方法。

相关文章：