javascript - 有没有办法以编程方式更改激活的 mat-tab？

Question

我想在 typescript 中更改激活的 mat-tab 文件。这里Programmatically select md-tab in Angular 2 material我找到了最接近的解决方案，但对于 md-tab 而不是 mat-tab。我试过了但没有用。这是我试过的

HTML

  <button class="btn btn-primary" (click)="changeTab()">Click me!</button>

    <mat-tab-group [selectedIndex]="selectedTab">
        <mat-tab label="Preview"> 
    </mat-tab>
        <mat-tab label="Tuning">
        <car-tuning></car-tuning>
        </mat-tab>
        <mat-tab label="Payment"></mat-tab> 
      </mat-tab-group> 

.TS 文件

 changeTab() {
     this.selectedTab =1;
}

Answer 1

您可以像这样添加双向绑定(bind) [(selectedIndex)]="selectedTab" 并且应该给您结果。

<button class="btn btn-primary" (click)="changeTab()">Click me!</button>

<mat-tab-group [(selectedIndex)]="selectedTab"> //<--- changes
   <mat-tab label="Preview"> 
   </mat-tab>
   <mat-tab label="Tuning">
     <car-tuning></car-tuning>
   </mat-tab>
    <mat-tab label="Payment"></mat-tab> 
</mat-tab-group> 

在 ts:

changeTab() {
   this.selectedTab = 1 //<------- your tab value
}