Question

我有一个Angular 5应用程序，其中MatTab控件包含4个选项卡。在每个标签中，我有一个MatStepper。在第一个选项卡中，行为符合预期。在后续选项卡中，当您单击以查看选项卡时，步进器看起来好像所有步骤都处于活动状态，而不是仅为视图展开第一步。

有没有人有类似的行为，可能知道造成这种情况的原因是什么？

Answer 1

我想这个错误已经解决了，尽管我还没有找到任何表明它在新版本的angular中已修复的信息（我还没有检查6.x）。 https://github.com/angular/material2/issues/10965

问题有点与渲染有关。因此，如果在加载标签后显示步进器，则可以正常工作。这是我目前的解决方案。我只需在.ts中创建selectedTab：number变量，然后这就是我的html。

<mat-tab-group  (selectChange) = 'selectedTab = $event.index'>
  <mat-tab label="tab 1">
    Content 1
  </mat-tab>
  <mat-tab label="tab 2">
      <div *ngIf="selectedTab==1;then step2"></div>
  </mat-tab>
</mat-tab-group>

<ng-template #step2>
  <mat-vertical-stepper [linear]="true" #stepper>
    <mat-step>
      <ng-template matStepLabel>Step 1</ng-template>
      step 1
      <button mat-raised-button color="primary" matStepperNext>Next</button>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>Step 2</ng-template>
      step 2
      <button mat-raised-button color="primary" matStepperNext>Next</button>
      <button mat-raised-button color="accent" matStepperPrevious>Back</button>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>Step 3</ng-template>
      step 3
      <button mat-raised-button color="accent" matStepperPrevious>Back</button>
    </mat-step>
  </mat-vertical-stepper>
</ng-template>

材料设计：Angular 5. Stepper问题

1 个答案: