Question

我有一个问题，因为Angular 5.X带有表单向导（mat-tab-group）。通过使用选项卡上的点击一切都很好，它在标签之间切换，但我不能使用“nextStep”或“previousStep”按钮在标签之间切换。这是我的代码：

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>

component.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。不好主意......所以解决问题，我在我的组件中创建了一个布尔值来显示或不显示mat-expansion-panel。如果我在好选项卡上，我将布尔值设置为true，否则布尔值为false。希望它很清楚^^

Answer 1

以上答案效果很好。但是，您可能要禁用mat-tab并将其隐藏。

.mat-tab-group .mat-primary .mat-ink-bar { visibility: hidden !important; }

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

Answer 2

您的解决方案的问题在于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);
  }

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

2 个答案: