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

Question

我想更改打字稿文件中激活的 mat-tab 。在这里以编程方式选择 Angular 2 材料中的 md-tab我找到了最接近的解决方案，但对于 md-tab 不是 mat-tab。我尝试了这个，但没有成功。这是我尝试过的

超文本标记语言

  <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

您可以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
}