有沒有辦法以編程方式更改激活的 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;
}

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
}

Answer 2

是的，你可以這樣改變。

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

    </mat-tab>
    <mat-tab>

    </mat-tab>
    <mat-tab>

    </mat-tab>
</mat-tab-group>

在 ts 中使用：

selectedIndex: number;

在你的函數中

this.selectedIndex = whateverIndexYouWant;

這是我從 ts 更改激活索引的方法。

this.data.currentMessage.subscribe(message => {
  switch (message) {
    case 'blabla':
      this.selectedIndex = 0;
      break;
    case 'blablablabla':
      this.selectedIndex = 1;
      break;
    case 'blablablablablabla':
      this.selectedIndex = 2;
      break;
  }
});