ngFor 只点击一项

Question

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

.html:

  <div class=" gif" *ngFor="let r of result">
    <img [src]="r.images.downsized.url" alt="image" (click)="getDetails()">
    <div class="v3" *ngIf="this.clicked">
      <ion-list>
        <ion-item>
          <ion-label>
            <h2>username: {{r?.username}}</h2>
            <h3>title: {{r?.title}}</h3>
            <p>import date:{{r?.import_datetime}}</p>
          </ion-label>
        </ion-item>
      </ion-list>
    </div>
  </div>

.ts:

  ngOnInit() {
    this.clicked = false
  }

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

Answer 1

this 在你的例子中是组件实例，所以 this.clicked 对于你所有的迭代项目都是全局的，这就是为什么它们都被显示出来的原因。作为一种解决方案，您可以存储点击索引：

<div class=" gif" *ngFor="let r of result; let i = index">
<img [src]="r.images.downsized.url" alt="image" (click)="clickedIndex = i">
<div class="v3" *ngIf="clickedIndex === i">
  <ion-list>
    <ion-item>
      <ion-label>
        <h2>username: {{r?.username}}</h2>
        <h3>title: {{r?.title}}</h3>
        <p>import date:{{r?.import_datetime}}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</div>

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

Answer 2

this指的是整个组件。唉只有一个this.clicked.

将 (click)="getDetails()" 更改为 (click)="getDetails(r)" 和
getDetails(): void { 到 getDetails(r: TypeOfR): void { 之类的东西，并使用点击的 Rs.

保留数组或哈希图

ngFor 只点击一项

ngFor click only one item

typescript

ionic-framework

angular