Как я могу изменить цвет кнопок при нажатии ionic 2 angular
Я попытался изменить цвет кнопки, которую я нажимаю, но он изменил все цвета кнопок списка
это мой код:
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>Сначала я попытался изменить цвет с помощью идентификатора, но я получил только неопределенный идентификатор, поэтому я попробовал этот метод
Вы можете это попробовать? Создайте свойство slideClicked в своем классе и измените свой шаблон с помощью: <button ion-button block [style.background-color] = "(slide === this.slideClicked) ? '#000000' : '#dddddd'" (click) = "this.slideClicked = slide" class = "currentGroup">
Я написал решение, поэтому, если вы сможете его проверить, вы станете королем ангелов o / @ B.E2s.
Ответы 1
Создайте свойство slideClicked в своем классе и измените свой шаблон следующим образом:
<button ion-button block [style.background-color] = "(slide === this.slideClicked) ? '#000000' : '#dddddd'" (click) = "this.slideClicked = slide" class = "currentGroup">
Вы устанавливаете
background-colorнаhexColorдля всех кнопок. В вашей функцииecardGroup(groupe)вы изменяете значениеhexColorглобально, а не для конкретной кнопки. Таким образом, это изменение коснется всех кнопок background-color.