使用Ionic动态更改Angular中特定按钮的按钮颜色？

Question

<ion-col col-3>
                <button ion-button (click)="onPunchPress($event)"><span>1</span></button>
            </ion-col>
            <ion-col col-3>
                <button ion-button (click)="onPunchPress($event)"><span>2</span></button>
            </ion-col>

如何更改特定按钮的颜色？假设如果我点击第一个按钮，那么只有它的 [color] 属性从“light”更改为“danger”怎么办？

我尝试了很多方法，当我使用 ngClass 时，它会更改所有按钮的类。我必须更改单击的一个，它应该是切换单击意味着更改/还原每个按钮。我怎样才能实现它？

Answer 1

可以通过[style.background]="boolFlag ? 'blue' : 'red'"实现， 并在click event. 上切换标志，例如：(click)="boolFlag = !boolFlag "

以Plunker 为例