ngFor 只点击一项

分享于2022年07月17日 angular ionic-framework typescript 问答
【问题标题】:ngFor 只点击一项(ngFor click only one item)
【发布时间】:2022-01-26 02:22:30
【问题描述】:

我对 ngFor 有疑问:对于列表中的每个项目,我都有一个图像,通过单击我想仅显示该图像的详细信息。问题是如果我点击一张图片,列表中所有项目的详细信息就会出来。

.html:

  
image

username: {{r?.username}}

title: {{r?.title}}

import date:{{r?.import_datetime}}

.ts:

  ngOnInit() {
    this.clicked = false
  }

  getDetails(): void {
    if (!this.clicked) {
      this.clicked = true
    }
    else {
      this.clicked = false
    }
  }

  • 使用你在循环中使用的变量: (click)="getDetails(r)" 和你的函数,例如: getDetails(el:any){console.log(el)}

【解决方案1】:

this 在您的情况下是组件实例,因此 this.clicked 对于您的所有迭代项目都是全局的,这就是为什么它们都会显示。作为一种解决方案,您可以存储点击的索引:

image

username: {{r?.username}}

title: {{r?.title}}

import date:{{r?.import_datetime}}

另一种解决方案是将详细信息部分从循环移动到单独的组件中,该组件将接收作为@Input 的详细信息

  • 可以直接传"r"
  • 当然可以,如果我理解你正确保存了当前迭代对象,比如说 clickedImage ,然后检查它是否是同一个实例: *ngIf="clickedImage === r"
  • 有没有一种简单的方法可以让你再次点击图片,第一次点击显示的细节消失?
  • 感谢您接受我的回答,如果您想切换图像详细信息,请返回您的 getDetails() 函数并将当前索引发送到其中: (click)="getDetails(i)" ,然后在此函数中检查索引是否为与选定索引相同,如果是,则将其重置,例如: this.clickedIndex = this.clickedIndex === i ? undefined : i
  • 完美,谢谢