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

Question

我想在打字稿文件中更改激活的 mat-tab。在这里以编程方式在 Angular 2 材料中选择 md-tab我找到了最接近的解决方案，但 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;
}

标签： javascriptangulartypescriptangular-material

Answer 1

你可以two way binding像这样 添加[(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
}