角材质按钮-切换组

Question

我有一个按钮切换组。功能是当我单击特定项目时，应更改背景色。当我切换按钮之一时，新选择的按钮的颜色应更改，而旧按钮应恢复为默认背景颜色。这是我的代码：

HTML

<mat-button-toggle-group name="fontStyle" aria-label="Font Style" vertical >
  <mat-button-toggle value="bold" (click)="changeColor()" mat-button-toggle [style.background-color]="color">Bold</mat-button-toggle>
  <mat-button-toggle value="italic" (click)="changeColor()" mat-button-toggle [style.background-color]="color">Italic</mat-button-toggle>
  <mat-button-toggle value="underline"(click)="changeColor()" mat-button-toggle [style.background-color]="color">Underline</mat-button-toggle>
</mat-button-toggle-group>

TypeScript

export class ButtonToggleOverviewExample {
  color:string;

  changeColor(){ 
    this.color='green';
  }

}

问题在于，一旦切换按钮，按钮的颜色仍与单击的按钮相同。

Answer 1

尝试这样的事情：

DEMO

在style.css

中

.mat-button-toggle-checked{
  background-color: green;
}