Вкладки угловых материалов SelectedIndex 0 не работают

Question

У меня есть группа вкладок в 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>

Answer 1

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

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

Answer 2

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

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

Мне также пришлось установить: encapsulation: ViewEncapsulation.None // внутри @Component

Answer 3

Я тоже столкнулся с этим. Обычно это происходит, когда у вас есть собственный компонент для рендеринга.mat-tab. Более «чистое» решение состоит в том, чтобы иметьViewChildдля тебяmat-tab-groupи вручную обновить выбранный индекс вашегоtabGroupвнутриngAfterViewInit.

      export class TabsComponent implements AfterViewInit {
  @ContentChildren(TabItemComponent) items: QueryList<TabItemComponent>;
  @ViewChild(MatTabGroup) tabGroup: MatTabGroup;
  @Input() selectedIndex = 0; // set as Input() if you want it to be dynamic

  constructor() {}

  ngAfterViewInit() {
    // doesn't work if outside setTimeOut()
    setTimeout(() => {
      this.tabGroup.selectedIndex = this.selectedIndex;
      this.tabGroup.realignInkBar(); // re-align the bottom border of the tab
    });
  }
}