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

来解决这个问题，但效果不好。请告诉我如何做到这一点，提前感谢

您可以使用

*ngIf

。根据步骤1中选择的值设置布尔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>

保单详情

我已经找到了如何使用“selectedIndex”跳过步骤的方法，但现在我遇到了另一个问题，因为跳过的步骤仍然处于活动状态。有没有办法使整个步骤禁用和不可点击（但可见）？