时间戳

首页 > 解决方案 > Ionic 3 独特的按钮

angular - Ionic 3 独特的按钮

问题描述

我是 Ionic 的新手并使用 Ionic v3。

我有 *ngFor 中继器渲染卡片列表，每张卡片包含一个图像和每个图像下的按钮，我怎样才能使按钮独一无二。我只希望图像下方的单击按钮更改其名称和颜色。代码现在更改渲染卡片中的所有按钮。

<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';
   }
}

数据数组

标签： angularionic-frameworkionic3

解决方案

相反，我会向数组中的卡片对象添加一个属性，该属性存储它是否“喜欢”（例如布尔值），然后在您的视图中，您可以迭代数组并在用户单击按钮时更新特定卡片：

<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.
   }
}

推荐阅读