Мат-кнопка-тумблер с динамическим стилем + 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