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

【问题标题】：Ionic button color change for specific button特定按钮的离子按钮颜色更改
【发布时间】：2017-11-06 11:44:23
【问题描述】：

我有多个这样的按钮

<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';
}

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

【问题讨论】：

标签： angular typescript ionic-framework

【解决方案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

【讨论】：

color 是离子按钮的特殊属性，如果我这样更改它不会反映在课堂上。如果我使用 [color]="btnActive" 并设置 btnActive = "secondary"，则此类 "button-md-dark" 将更改为 ''button-md-secondary"。
@Yamona，请检查更新的答案以及链接
这是正确答案。但我将其编辑为更具体的答案/代码。

【解决方案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";
}

【讨论】：

这将改变所有按钮的颜色，但我想要的只是改变点击按钮的颜色属性
按钮是静态的还是动态的？
例如，如果单击第一个按钮颜色更改为 XXX，现在我单击第二个按钮最后单击的按钮应更改为默认值？
[style.background-color] 或 [color] 具有相同的效果。请阅读 jitender 评论。
我有 23 个按钮。这将是一个很长的解决方案。

【解决方案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>

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

css

.btnActive
{
 background-color:red
}

Working demo

【讨论】：