Angular 爱奥尼亚3独特的按钮

我是爱奥尼亚的新手，使用爱奥尼亚v3

我有一个*Ng用于repeater渲染卡片列表，每张卡片包含一个图像和每个图像下的一个按钮， 我如何使按钮独一无二。我只希望单击图像下的按钮来更改其名称和颜色。代码现在更改渲染卡中的所有按钮

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

---

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

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

---

你有3页。每个页面都应该有自己的like按钮，有自己的颜色和图标。因此，颜色和图标应该是页面的属性，而不是显示所有页面的组件的属性。否则，您只有一种颜色和一个图标。或者您可以使用一个类似的按钮组件，并对每个页面使用一个此类组件。@jbnize谢谢您的回答，我编辑了我的问题以使其更清楚。你能看一下并让我知道吗，因为我不太明白你的解决方案。如果你想在第一张卡上有一个红色按钮，在第二张卡上有一个绿色按钮，在第三张卡上有一个蓝色按钮，你需要有三个不同的颜色变量，而不仅仅是一个。如果你有1000张卡片，你需要1000个变量。这里有一个直接的关联：每张卡都必须有自己的颜色，因此有自己的变量来保存该颜色。因此，您需要将颜色存储在卡本身上，而不是存储在此

上（即组件，它是唯一的）：
<代码>likeButton（c:Card）{if（c.icon_name==='heart outline'）{…

@JBNizet..我需要一个心形按钮，和instagram一样。因此，每次单击按钮都会被涂成红色，再次单击时会变回黑色。我现在面对的是，单击时，所有按钮都会被涂成红色，而不仅仅是单击的按钮。是的，我完全理解。你看过我的评论了吗？有什么不清楚的地方吗？d你不明白吗？假设你有一个类组件。这个类组件有一个由3个人组成的数组。每个人必须有不同的名字。应该在组件对象或用户对象上定义

name

属性在哪里？这里相同。你有3张卡，每个卡都有一种颜色。应该在哪里定义颜色？在组件对象上耳鼻喉科，还是卡片上？

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