Ionic 3 уникальных кнопки

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

Массив данных

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