如何更改 Ionic 3 中 *ngFor 内单个按钮的样式？

Question

我正在尝试更改我在 ion-col 的 *ngFor 中单击的特定按钮的样式。目前当我点击一个按钮时，所有按钮的样式会同时改变。

这是我的代码：

<ion-col *ngFor="let item of displayRestaurant[0].seatTimeSlotAndDiscount | slice:indexStart:indexEnd; let i=index" no-padding>
  <button ion-button style="border-radius:100px;height:70px;width:70px;text-align:center;" (click)="clickedDiscount(item)"  [ngClass]="clickedDiscountBoolean ? 'discountClicked' : 'discountUnclicked'">
    <p style="font-size: 10px; color:white;">{{item.percentageDiscount}}</p>
    <p style="font-size:10px;color:white;">{{item.timeOfDiscount}}</p>
  </button>
</ion-col>

SCSS:

.discountClicked{
    border: 3px solid orange;
}

.discountUnclicked{
    border:none;
}

.ts:

clickedDiscount(discount:Discount){
  this.clickedDiscountBoolean = !this.clickedDiscountBoolean;
}

本来是这样的：

这是我点击任何按钮后我当前代码的作用（新样式应用于所有按钮）：

我要找的是，当我点击任何一个按钮时，只有那个按钮的样式会改变，其余的不会。

Answer 1

您所有的按钮都查找相同的条件。您需要将该条件统一为仅对一个按钮为真。您可以为此使用索引值：

<ion-col *ngFor="let item of displayRestaurant[0].seatTimeSlotAndDiscount | slice:indexStart:indexEnd; let i=index" no-padding>
  <button ion-button style="border-radius:100px;height:70px;width:70px;text-align:center;" 
      (click)="clickedDiscount(item,i)"  
      [ngClass]="clickedIndex ===  i ? 'discountClicked' : 'discountUnclicked'">
    <p style="font-size: 10px; color:white;">{{item.percentageDiscount}}</p>
    <p style="font-size:10px;color:white;">{{item.timeOfDiscount}}</p>
  </button>
</ion-col>

然后在你的组件中

clickedDiscount(discount:Discount,index:number){
  this.clickedIndex = index;
}

如何更改 Ionic 3 中 *ngFor 内单个按钮的样式？

How do I change the style of a single button inside a *ngFor in Ionic 3?

css

sass

ionic-framework

ionic3

angular