mat-button-toggle-checked with dynamic style + Angular 6

Question

我正在尝试自定义我的按钮切换，但我当前的代码不起作用...

这是实际代码

<mat-button-toggle-group #mytoggle (change)="selectoption($event)" value="{{num}}">
            <mat-button-toggle [style.background-color]="getColor(op)" *ngFor="let op of mylist" [value]="op">{{op}}</mat-button-toggle>
        </mat-button-toggle-group>

这是我在 .ts 上的方法

 getColorChecked(opcao: any){
        if ( opcao === 2){
            return '#EA0B28 !important;';
        }else{
            return '#9d9b9a !important;';
        }
    }

这是我的 scss 文件

.mat-button-toggle-group, .mat-button-toggle-standalone{
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.02), 0 2px 2px 0 rgba(0,0,0,.01), 0 1px 5px 0 rgba(0,0,0,.12);
}   
 .mat-button-toggle{
      border-right: 1px solid #cccccc40 !important;
      font-weight: 400;
      width: 50px !important;
      padding: 0px !important;
      background: #f7f9fbc7 !important;
      div{
        padding: 0px !important;
      }
    }
    .mat-button-toggle-checked {
      color: #fbfbfb;
    }

它不起作用...有最好的方法吗？

Answer 1

解决方案 1：所有选定按钮的颜色相同

您可以添加这些CSS Class：

.mat-button-toggle-appearance-standard {
    background-color: #9d9b9a;
    color:white;
}

.mat-button-toggle-checked {
    background-color: #EA0B28;
    color:white;
}

---

解决方案 2：通过选定按钮实现单色

您可以根据它们在文档中的位置添加这些CSS Class::nth-child(x) 目标项目

.bg-red:nth-child(1) {
    background-color: red;
    color:white;
}

.bg-green:nth-child(2) {
    background-color: green;
    color:white;
}

.bg-blue:nth-child(3) {
    background-color: blue!important;
    color:white;
}

HTML：

<mat-button-toggle-group>
  <mat-button-toggle *ngFor="let op of mylist" 
    [value]="op" 
    [ngClass]="{'bg-red':selected === 1,'bg-green':selected === 2,'bg-blue':selected === 3}" 
    (click)="selected = op"> {{op}}
  </mat-button-toggle>
</mat-button-toggle-group>

TS：

export class ButtonToggleOverviewExample {
  mylist = [1,2,3];
  selected;
}

---

StackBlitz