如何在点击离子2角度上更改颜色按钮

Question

我尝试更改单击按钮的颜色，但它会更改列表按钮的所有颜色

这是我的代码：

ecardGroup(groupe) {
    if(this.hexColor === '#000000') { 
      this.hexColor = '#dddddd'
    } else {
      this.hexColor = '#000000'
    }
 }

 <ion-col col-9 class="sildes">
                    <ion-slides slidesPerView="{{nbPerPage}}" spaceBetween="5">
                        <ion-slide *ngFor="let slide of lesEboxs; let i = index">
                            <button ion-button block (click)="ecardGroup(slide)" class="currentGroup" [style.background-color]="hexColor">
                                <ion-icon class="warning"  name="star" *ngIf="slide.nom_gr == 'Pro'"></ion-icon>
                                {{slide.nom_gr}}
                            </button>
                        </ion-slide>
                    </ion-slides>
                </ion-col>

Answer 1

在您的课程上创建slideClicked属性并更改您的模板：

<button ion-button block [style.background-color]="(slide === this.slideClicked) ? '#000000' : '#dddddd'" (click)="this.slideClicked = slide" class="currentGroup">