Угловые вкладыши материалов SelectedIndex 0 не работает

У меня есть группа вкладок в Angular. Я хочу, чтобы по умолчанию была выбрана первая вкладка.
Однако, когда я установил selectedIndex 0, он не выбирает первую вкладку, при установке его в 1 или 2 не выберите другие вкладки.

Это мой app.component.html:

<mat-toolbar color="primary">
  <span color="white">קשת נחושה</span>
  <span class="spacer"></span>
  <button mat-icon-button>
        <mat-icon class="example-icon">more_vert</mat-icon>
  </button>
</mat-toolbar>
<mat-tab-group mat-stretch-tabs [selectedIndex]="0" (focusChange)="selectedTab($event)">
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon>home</mat-icon>
    </ng-template>
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon>book</mat-icon>
    </ng-template>
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon>message</mat-icon>
    </ng-template>
  </mat-tab>
</mat-tab-group>
<router-outlet></router-outlet>

Ответы

Ответ 1

это ошибка, но вы можете использовать 2 способа привязки данных, это работает

<md-tab-group [(selectedIndex)]="value">

Ответ 2

Моя вкладка была выбрана, но стиль не обновлялся. Я должен был установить:

.mat-tab-label-active {
  opacity: 1;
}

Я также должен был установить: encapsulation: ViewEncapsulation.None//inside @Component