angular - 跳过 Angular Material 步进器中的步骤(取决于某些条件)

Question

我有一个带有 Angular Material 步进器的 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。根据在步骤 1 中选择的值设置 bool 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>