Угловая вкладка материала не подсвечивается

Question

Я пытаюсь программно установить выбранный индекс, и он отлично работает, благодаря [(selectedIndex)]="", но всякий раз, когда я выбираю индекс с этим, на выбранном элементе нет выделения.

Он выбран, потому что вы можете видеть его содержимое, но графическое представление выбранного состояния вкладки отсутствует. Это ошибка или это можно как-то сделать?

Html

 <mat-tab-group [(selectedIndex)]="this.dataService.selectedTabs[0]">
  <mat-tab *ngFor="let Tab of this.dataService.Tabs">
    <ng-template mat-tab-label>
      {{Tab.label}}
    </ng-template>
    <div *ngIf="Tab.childTabs.length !== 0">
     //INSIDE OF THIS SECTION THERE ARE MORE NESTED TABS
    </div>
  </mat-tab>
</mat-tab-group>

И когда я открываю эту вкладку, вложенные вкладки внутри ее содержимого не выделяются, но они открываются.

Ts

public selectedTabs: any[] = [
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
];

Answer 1

Это решение работает, но в основном это обходной путь. Просто добавьте этот код в файл style.css :

.mat-tab-label-active {
bottom-border-style:solid !important;
opacity: 1 !important;
}