跳過角度材料步進器中的步驟（取決於某些條件）

Question

我有一個帶有 Angular Material stepper 的 Angular 頁面，其中每個步驟的內容都在一個獨立的組件中：

<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <mat-step [stepControl]="policyholder" state="phone">
    <ng-template matStepLabel>
     <span class="d-none d-sm-block">Policyholder</span>
    </ng-template>
    <policyholder></policyholder>
  </mat-step>

  <mat-step [stepControl]="policydetails">
    <ng-template matStepLabel><span class="d-none d-sm-block">Policy Details</span></ng-template>
    <policydetails></policydetails>
  </mat-step>

  <mat-step [stepControl]="paymentdetails">
    <ng-template matStepLabel><span class="d-none d-sm-block">Payment Details</span></ng-template>
    <paydetails></paydetails>
  </mat-step>
...
</mat-horizontal-stepper>

每個步驟都有一些帶有各種字段（輸入、選擇等）的表單。

我的問題是 - 根據第 1 步中的某些選擇選項，是否可以跳過第 2 步並直接進入第 3 步？ 例如，只有在下面選擇了“yesOption”？

或者，作為一個選項 - 使第 2 步不可見？

<mat-form-field appearance="outline" class=“someClass”>
  <mat-label>Some Condition</mat-label>

  <mat-select placeholder=“Some Select“ formControlName="someControl">
    <mat-option value=“yesOption”>Yes</mat-option>
    <mat-option value=“noOption”>No</mat-option>
  </mat-select>

</mat-form-field>

目前，我切換到下一步如下：

<button class="someClass" type="submit" [disabled]="policyholderForm.invalid" mat-button matStepperNext>Next Step</button>

我嘗試使用selectedIndex來解決這個問題，但效果不佳。 請告訴我如何做到這一點，提前致謝！

Answer 1

你可以用*ngIf 。 根據在 step1 上選擇的值設置布爾 enableStep2 標志值。

<mat-step [stepControl]="policydetails" *ngIf="enableStep2">
    <ng-template matStepLabel><span class="d-none d-sm-block">Policy Details</span></ng-template>
    <policydetails></policydetails>
  </mat-step>