Angular 在爱奥尼亚2中单击时更改特定按钮颜色

这是我的html示例：

<ion-col col-6>
    <button ion-button block (click)="toggleNamedColor()" ion-button [color]="ionicNamedColor">
      test
    </button>
  </ion-col>
  <ion-col col-6>
    <button ion-button block ion-button block (click)="toggleNamedColor()" ion-button [color]="ionicNamedColor">
      test
    </button>
  </ion-col>

---

问题是：现在这段代码使所有按钮在单击任何按钮时都会改变颜色。如何更改此选项，以便只更改特定按钮，而不更改所有其他按钮的变量？

尝试将$event发送到切换函数

<ion-col col-6>
    <button ion-button block (click)="toggleNamedColor($event)" ion-button color="primary">
      test
    </button>
</ion-col>

<ion-col col-6>
    <button ion-button block ion-button block (click)="toggleNamedColor($event)" ion-button color="primary">
      test
    </button>
</ion-col>

---

尝试将$event发送到您的切换函数

<ion-col col-6>
    <button ion-button block (click)="toggleNamedColor($event)" ion-button color="primary">
      test
    </button>
</ion-col>

<ion-col col-6>
    <button ion-button block ion-button block (click)="toggleNamedColor($event)" ion-button color="primary">
      test
    </button>
</ion-col>

---

你能详细说明一下按钮的类型和颜色吗？这是我正在开发的一个过滤器搜索页面的可切换按钮列表。所有按钮都应该具有相同的样式（我在_variables.scss文件上设置的主颜色），但是当单击一个按钮时，它应该更改为light color变量，这就是代码所做的。但是它正在改变所有按钮的ionicNamedColor变量的值，而不仅仅是一个特定的。你能给出详细信息，按钮的类型和颜色吗？这是我正在开发的过滤器搜索页面的可切换按钮列表。所有按钮都应该具有相同的样式（我在_variables.scss文件上设置的主颜色），但是当单击一个按钮时，它应该更改为light color变量，这就是代码所做的。但是它改变了所有按钮的ionicNamedColor变量的值，而不仅仅是那个按钮。

submit(event) {
    let prevColor = this.color;
    if (this.color === 'primary') {
            this.color = 'light'
    } else {
            this.color = 'primary'
    }

    if (event.target.localName === 'button') {
        event.target.className =event.target.className.replace('button-md-' + prevColor, 'button-md-' + this.color);
    } else if (event.target.parentElement.localName === 'button') {
        event.target.parentElement.className = event.target.parentElement.className.replace('button-md-' + prevColor, 'button-md-' + this.color);
    }
}