Dynami c Класс на матовой панели, открытой в angular

Question

Я пытаюсь дать класс динамически для mat-panel, но я не могу сделать это правильно. Ниже мой код

.ts

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {

  activeIndex = 0
  constructor(private cd : ChangeDetectorRef) { }

  menuList = [
    {label: 'Menu 1' ,name: 'menu-1', childs: ['item1','item2','item3']},
    {label: 'Menu 2' ,name: 'menu-2', childs: ['item1','item2']},
    {label: 'Menu 3' ,name: 'menu-3', childs: ['item1','item2','item3']},
  ]

  setIndex(index: number) {
    this.activeIndex = index
    this.cd.detectChanges() // not working
  }

}

. html

    <div class="nav">
            <mat-accordion>
                <mat-expansion-panel *ngFor="let menu of menuList; let i = index" (click)="setIndex(i)">
                    <mat-expansion-panel-header [ngClass]="{'active': activeIndex === i}">
                    <mat-panel-title>
                        {{menu.label}}
                    </mat-panel-title>
                    </mat-expansion-panel-header>
                    <ul>
                        <li *ngFor="let submenu of menu.childs">
                            {{submenu}}
                        </li>
                    </ul>
                </mat-expansion-panel>
            </mat-accordion>
        </div>

. s css

.active{
      color: red;
      background-color: rgba(100,100,100,1);
  }

Я также использовал changeDetector для обнаружения изменений, но активный css по-прежнему не применяется. При проверке я могу проверить, что класс добавлен css не применяется правильно. Цвет изменяется, но цвет фона не применяется

Демонстрационная ссылка https://stackblitz.com/edit/angular-a8pqfu?embed=1&file=src / app / menu / menu.component. css

Answer 1

На самом деле background-color применяется, но при наведении на него цвета наследуется, вы должны изменить его, добавив приведенный ниже код в ваш файл * css

 .mat-expansion-panel-header.mat-expanded:focus, 
 .mat-expansion-panel-header.mat-expanded:hover{
    background-color: rgba(100,100,100,1);
  }