通过单击按钮更改选项卡角材料 5

Question

从 Angular 5.X 开始，我就遇到了表单向导 (mat-tab-group) 的问题。通过单击选项卡一切正常，它可以在选项卡之间切换，但我无法使用“下一步”或“上一步”按钮在选项卡之间切换。这是我的代码：

组件.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>

组件.ts

    public tabChanged(tabChangeEvent: MatTabChangeEvent): void {
        this.selectedIndex = tabChangeEvent.index;
    }

    public nextStep() {
        this.selectedIndex += 1;
    }

    public previousStep() {
        this.selectedIndex -= 1;
    }

我被 [(selectedIndex)]="selectedIndex" 困住了，因为它不能与 mat-expansion-panel 一起使用（Mat 扩展面板默认打开错误？）。所以我必须删除它，但是，如果我删除它，我的按钮“nextStep”和“previousNext”将不再起作用......

我正在使用：角度材料5.1.1

对此有什么想法吗？

编辑：正如我所说，问题与 selectedIndex 有关...我在显示 mat-expansion-panel 的条件中使用了 selectedIndex。坏主意......所以解决问题，我在组件中创建了一个布尔值来显示或不显示垫扩展面板。如果我在“好”选项卡上，我将布尔值设置为 true，否则，布尔值为 false。希望说清楚了^^

Answer 1

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

selectedIndex: number = 0;

您在 tabChanged() 函数中用 MatTabChangeEvent 填充了它。删除该函数或使用不同的变量。

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

这是一个工作示例：

html:

  <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>

TS：

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);
  }