Material Design：Angular 5. Stepper 问题

Question

我有一个 Angular 5 应用程序，其中有一个包含 4 个选项卡的 MatTab 控件。 在每个选项卡中，我都有一个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>