材質設計：Angular5。步進問題

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>