ionic4 如何使用 ngFor 设置单个点击事件答案

【问题标题】：ionic4 how to set individual click event with ngForionic4 如何使用 ngFor 设置单个点击事件
【发布时间】：2019-08-15 02:08:13
【问题描述】：

我有一个显示卡的 ngFor。当我点击任何一张卡片时，我想显示我点击的卡片的完整信息

我试过这个：

private showDetailCard = false;
expandCard() {
   this.showDetailCard = !this.showDetailCard;
}

但是当我点击其中一个时，它们都打开了。

这是我的 HTML：

<div (click)="expandCard()" *ngFor="let key of cars">
   <!-- basic infomation -->
</div>

<div [@expandCard] *ngIf="showDetailCard">
   <!-- the rest of information -->
</div>

我该如何解决这个问题？

【问题讨论】：

标签： angular ionic4 ngfor

【解决方案1】：

我找到了解决办法：

<div *ngFor="let key of cars">
   <div (click)="expandCard(key.carId.value)">
      <!-- basic infomation -->
   </div>
</div>

<div [@expandCard] *ngIf="showDetailCard[key.carId.value]">
   <!-- the rest of information -->
</div>

ts：

  private showDetailCard: any = {};
  expandCard(id) {
    if (this.showDetailCard[id] !== undefined) {
      this.showDetailCard[id] = !this.showDetailCard[id];
    } else {
      this.showDetailCard[id] = true;
    }
  }

【讨论】：