Angular 通过单击按钮更改选项卡角度材质5

自从Angular 5.X使用表单向导（mat选项卡组）以来，我遇到了一个问题。通过点击选项卡，一切都很好，它可以在选项卡之间切换，但我不能使用“下一步”或“上一步”按钮在选项卡之间切换。这是我的代码：

component.html

<mat-tab-group [(selectedIndex)]="selectedIndex" (selectedTabChange)="tabChanged($event)" class="mat-tab-group mat-primary"> 

<mat-tab label="Description">
 content...
<mat-card-content class="mat-card-content">
</mat-card-content>
 <mat-card-footer style="margin:0 auto;">
         <div fxLayout="row" fxLayoutAlign="end center">
            <button mat-button type="button" (click)="cancel()" mat-raised-button color="warn">Cancel</button>
            <button color="primary" mat-raised-button (click)="nextStep()" type="button">Next</button>                   
         </div>
     </mat-card-footer>
   </mat-tab>
</mat-tab-group>

我坚持使用[（selectedIndex）]=“selectedIndex”，因为它不适用于mat扩展面板（）。所以我必须删除它，但是，如果我删除它，我的按钮“下一步”和“上一步”将不再工作

我使用的是：角度材质5.1.1

你知道吗

---

编辑：正如我所说，问题是关于selectedIndex。。。我在条件中使用selectedIndex来显示mat扩展面板。坏主意。。。为了解决这个问题，我在我的组件中创建了一个布尔值来显示或不显示mat扩展面板。如果我在good选项卡上，我将布尔值设置为true，否则，布尔值为false。希望您能明白^^

您的解决方案的问题是所选索引应该是一个数字！您必须设置为0或任何其他索引：

selectedIndex: number = 0;

您在tabChanged（）函数中用MatTabChangeEvent填充了它。删除该函数或改用其他变量

（尝试使用控制台日志进行调试。）

这是一个工作示例：

html:

---

上述答案很有效。但是，您可能希望禁用“垫”选项卡并将其隐藏

.mat选项卡组.mat primary.mat墨条{可见性：隐藏！重要；
}

可能与@Aravind重复我尝试过这个。。。它不起作用它不起作用吗？你的plunker实际上没有运行（angular/cdk有很多错误…）我会修复它给我一些时间

selectedIndex: number = 0;

  <button (click)="previousStep()">
    <mat-icon>arrow_back_ios</mat-icon>
  </button>
  <button (click)="nextStep()">
      <mat-icon>arrow_forward_ios</mat-icon>
  </button>
    <mat-tab-group [selectedIndex]="selectedIndex">
      <mat-tab *ngFor="let number of [0,1,2,3,4];let i=index; ">
        <ng-template mat-tab-label>
        </ng-template>
        content{{number}}
      </mat-tab>

selectedIndex: number = 0;

 nextStep() {
    if (this.selectedIndex != maxNumberOfTabs) {
      this.selectedIndex = this.selectedIndex + 1;
    }
    console.log(this.selectedIndex);
  }

  previousStep() {
    if (this.selectedIndex != 0) {
      this.selectedIndex = this.selectedIndex - 1;
    }
    console.log(this.selectedIndex);
  }

<mat-tab disabled="true" *ngFor="let number of [0,1,2];let i=index; ">