Question

我是Ionic的新用户，并且正在使用Ionic v3。

我有* ng个中继器，用于呈现卡片列表，每个卡片都包含一个图像和每个图像下方的一个按钮，我如何才能使按钮独特。我只希望图像下的单击按钮可以更改其名称和颜色。现在，代码将更改渲染卡片中的所有按钮。

<ion-card no-padding padding-bottom no-margin class="card" *ngFor="let c of cards;">

<ion-row>
  <img src={{c.Image}} />
</ion-row>

 <button clear ion-button icon-only (click)="likeButton(c)" class="like-btn">
    <ion-icon no-padding [name]="like_btn.icon_name" color="{{ like_btn.color }}" class="icon-space"></ion-icon>
</button>

</ion-card>

，这里是.ts

likeButton(c: any) {
   if(this.like_btn.icon_name === 'heart-outline') {
      this.like_btn.icon_name = 'heart';
      this.like_btn.color = 'danger';
      // Do some API job in here for real!
   }
   else {
      this.like_btn.icon_name = 'heart-outline';
      this.like_btn.color = 'black';
   }
}

Array of Data

Answer 1

我会改为在存储卡中的存储卡对象中添加一个属性，以存储是否“喜欢”（例如一个布尔值），然后在您看来，您可以遍历该数组并在用户使用时更新特定的存储卡点击按钮：

<ion-card no-padding padding-bottom no-margin class="card" *ngFor="let c of cards>

<ion-row>
  <img src={{c.Image}} />
</ion-row>

 <button clear ion-button icon-only (click)="likeButton(c)" class="like-btn">
    <ion-icon no-padding [name]="c.liked ? 'heart' : 'heart-outline'" [color]="c.liked ? 'danger' : 'black'" class="icon-space"></ion-icon>
</button>

</ion-card>

然后使用您的likeButton方法：

likeButton(c: any) {
   if (c.liked) {
      c.liked = false // Update the array which should also update your view  
      // Do whatever you want when a card is changed to not liked.
   } else {
      c.liked = true // Update the array which should also update your view  
      // Do whatever you want when a card is changed to liked.
   }
}

离子3个独特按钮

1 个答案: