Question

我有多个像这样的按钮

<button id="1" ion-button [color]="btnColor" (click)="btnActivate()">text</button>
<button id="2" ion-button [color]="btnColor" (click)="btnActivate()">text</button>
//etc..



btnColor: string = 'dark';

btnActivate() {
  this.btnColor = 'secondary';
}

当用户点击任何按钮时，所有按钮的颜色会发生变化。我想要的是仅更改单击按钮的颜色属性，或更改按钮的

。

Answer 1

我认为你需要的就是这个

模板方：

<button #first ion-button color="dark" (click)="btnActivate(first)">text</button>
<button #second ion-button color="dark" (click)="btnActivate(second)">text</button>

组件方：

btnActivate(ionicButton) {
    ionicButton.color =  'primary';
}

链接到工作示例（请检查控制台/检查按钮）：

https://stackblitz.com/edit/ionic-change-button-color

Answer 2

您必须在按钮中[style.background-color]。

HTML

<div *ngFor="let btn of btnArray;let ind = index">
    <button ion-button [style.background-color]="btn.backgroudColor" (click)="btnActivate(ind)">{{btn.title}}</button>
</div>

TS

btnArray = 
[
    {
        "title":"Btn1",
        "backgroudColor":"#ff00ff"
    },
    {
        "title":"Btn2",
        "backgroudColor":"#ff00ff"
    },
    {
        "title":"Btn3",
        "backgroudColor":"#ff00ff"
    }
]
btnActivate(ind)
{
    this.btnArray[ind]['backgroudColor'] = "#ffff00";
}

Answer 3

<强> HTML

<button id="1" ion-button [ngClass]="{'btnActive': selectedId===1}"(click)="btnActivate(1)">text</button>
<button id="2" ion-button  [ngClass]="{'btnActive': selectedId===2}" (click)="btnActivate(2)">text</button>

<强> TS

selectedId:number= 1;
btnActivate(id:number)
{
   this.selectedId= id;
}

<强> CSS

.btnActive
{
 background-color:red
}

Working demo

特定按钮的离子按钮颜色更改

3 个答案:

HTML

TS