Ionic ngFor只单击一个项目

ccrfmcuu  于 2022-12-09  发布在  Ionic
关注(0)|答案(2)|浏览(141)

ngFor有问题:对于列表中的每一项,我都有一个图像,通过单击,我只想显示该图像的详细信息。2问题是,如果我单击一个图像,列表中所有项的详细信息都会显示出来。
.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
    }
  }
hrysbysz

hrysbysz1#

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>
</div>

另一个解决方案是将details部分从循环中移到单独的组件中,该组件将以@Input的形式接收详细信息

rkkpypqq

rkkpypqq2#

this指的是整个组件,可惜只有一个this.clicked
(click)="getDetails()"更改为(click)="getDetails(r)",然后
getDetails(): void {转换为类似getDetails(r: TypeOfR): void {的内容,并保留一个数组或散列表,其中单击了Rs。

相关问题