Angular 特定按钮的离子按钮颜色变化

我有多个这样的按钮

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

文本
文本
//等等。。
btnColor:string='dark'；
btnActivate（）{
this.btnColor='secondary'；
}

---

当用户单击任何按钮时，所有按钮的颜色都会改变。我想要的是仅更改单击按钮的颜色属性或根据按钮的ID更改。

您必须在按钮中

[style.background color]

html

---

您必须在按钮中

[style.background color]

html

---

我想你只需要这个

模板侧：

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

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

---

我想你所需要的就是这个

模板侧：

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

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

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>

css

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

.btnActive
{
 background-color:red
}

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>

css

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

.btnActive
{
 background-color:red
}

---

这将更改所有按钮的颜色，但op ask I want是仅更改已单击按钮的颜色属性按钮是静态的还是动态的？例如，如果单击第一个按钮的颜色更改为XXX，而现在我正在单击第二个按钮，则最后单击的按钮应更改为默认值？[style.background color]或[color]也有同样的效果。请阅读jitender评论。我有23个按钮。这将是一个很长的解决方案。这将更改所有按钮的颜色，但op ask I want是仅更改已单击按钮的颜色属性按钮是静态的还是动态的？例如，如果单击第一个按钮的颜色更改为XXX，而现在单击第二个按钮，最后单击的按钮应更改为默认值？[style.background color]或[color]具有相同的效果。请阅读jitender注释。我有23个按钮。这将是一个非常长的解决方案。颜色是离子按钮的特殊属性，如果我这样更改，它将不会反映在类中。如果我使用[color]=“btnActive”，该类“button md dark”将更改为“button-md-secondary”“并设置btnActive=“secondary”。@Yamona，请检查更新的答案和链接这是正确的答案。但我将其编辑为更具体的答案/代码。颜色是爱奥尼亚按钮的特殊属性，如果我这样更改，它将不会反映在课堂上。如果我使用，该类“button md dark”将更改为“button-md-secondary”[color]=“btnActive”并设置btnActive=“secondary”。@Yamona，请检查更新的答案和链接这是正确的答案。但我将其编辑为更具体的答案/代码。