Angular Material Tabs SelectedIndex 0 not working

问题

I have a tab group in Angular. I want that by default the first tab will be selected.
However, when I set the selectedIndex to 0, it doesn't select the first tab, while setting it to 1 or 2 does select the other tabs.

This is my 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:

it's a bug but you can use 2 ways data binding, it works

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

回答2:

My tab was selected but the styling did not update. I had to set:

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

I also had to set: encapsulation: ViewEncapsulation.None // inside @Component

来源：https://stackoverflow.com/questions/47463849/angular-material-tabs-selectedindex-0-not-working