angular - 通过单击按钮更改选项卡 Angular Material 5

Question

从 Angular 5.X 开始，我有一个带有表单向导(mat-tab-group)的问题。通过单击选项卡一切正常，它在选项卡之间切换，但我不能使用“nextStep”或“previousStep”按钮在选项卡之间切换。这是我的代码:

组件.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 expansion panel is opened by default bug? )。所以我必须删除它，但是，如果我删除它，我的按钮“nextStep”和“previousNext”不再起作用......

我正在使用: Angular Material 5.1.1

对此有什么想法吗？

编辑:正如我所说，问题是关于 selectedIndex ......我在条件中使用 selectedIndex 来显示 mat-expansion-panel。坏主意......所以解决这个问题，我在我的组件中创建了一个 bool 值来显示或不显示垫子扩展面板。如果我在好选项卡上，我将 bool 值设置为 true 否则， bool 值为 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);
  }