小编sir*_*rss的帖子

ngFor 仅单击一项

我的 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>
Run Code Online (Sandbox Code Playgroud)

.ts:

  ngOnInit() {
    this.clicked = false
  }

  getDetails(): void {
    if (!this.clicked) {
      this.clicked = true
    }
    else {
      this.clicked = false
    }
  }
Run Code Online (Sandbox Code Playgroud)

typescript ionic-framework angular

3
推荐指数
1
解决办法
2501
查看次数

标签 统计

angular ×1

ionic-framework ×1

typescript ×1