有没有办法以编程方式更改激活的 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&nbsp; &nbsp;<mat-tab label="Preview">&nbsp;&nbsp; &nbsp;</mat-tab>&nbsp; &nbsp;<mat-tab label="Tuning">&nbsp; &nbsp; &nbsp;<car-tuning></car-tuning>&nbsp; &nbsp;</mat-tab>&nbsp; &nbsp; <mat-tab label="Payment"></mat-tab>&nbsp;</mat-tab-group>&nbsp;在 ts：changeTab() {&nbsp; &nbsp;this.selectedTab = 1 //<------- your tab value}

Answer 2

是的，你可以这样改变。<mat-tab-group [(selectedIndex)]="selectedIndex">&nbsp; &nbsp; <mat-tab>&nbsp; &nbsp; </mat-tab>&nbsp; &nbsp; <mat-tab>&nbsp; &nbsp; </mat-tab>&nbsp; &nbsp; <mat-tab>&nbsp; &nbsp; </mat-tab></mat-tab-group>在 ts 中使用：selectedIndex: number;在你的函数中this.selectedIndex = whateverIndexYouWant;这是我从 ts 更改激活索引的方法。this.data.currentMessage.subscribe(message => {&nbsp; switch (message) {&nbsp; &nbsp; case 'blabla':&nbsp; &nbsp; &nbsp; this.selectedIndex = 0;&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; case 'blablablabla':&nbsp; &nbsp; &nbsp; this.selectedIndex = 1;&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; case 'blablablablablabla':&nbsp; &nbsp; &nbsp; this.selectedIndex = 2;&nbsp; &nbsp; &nbsp; break;&nbsp; }});