如何重置为第一步 Angular stepper CDK？

Question

我有一个项目列表，每个项目都有一个按钮来显示模态步进器。例如，当我单击带有 id="1" 的项目 1 的按钮并单击步骤 2 旁边的步进器时，然后通过单击模态上的取消来关闭模态。之后，我单击打开模式项 2，id="2，但步进器仍然保持第 2 步，我希望它重置为第 1 步

<app-ui-modal
  [(show)]="isShowModalStepper"
  [hiddenHeader]="false"
  [hiddenFooter]="true"
  [paddingNone]="true"
  [width]="60"
  [height]="">
  <div ui-modal-body>
    <app-stepper #cdkStepper [linear]="true">
      <cdk-step label="step 1" [editable]="true" [stepControl]="frmConfirmRight" [optional]="false">
        <ng-template cdkStepLabel>
          <span>STEP 1</span>
        </ng-template>
        <form [formGroup]="frmConfirmRight">
          <div class="my-4">
            <p class="text-center text-3xl text-orange-regular">Hello world</p>
            <div class="flex justify-center my-2">
              <app-ui-input-container>
                <app-ui-input-checkbox-wrapper label="Agree">
                  <input appUIInputCheckbox type="checkbox"
                    formControlName="confirm">
                </app-ui-input-checkbox-wrapper>
              </app-ui-input-container>
            </div>
          </div>
          <footer class="my-4 flex-center">
            <!-- Close modal -->
            <button class="mx-1 w-24" [size]="'md'" app-ui-button [variant]="'default'"
              (click)="isShowExclusion = !isShowExclusion">
              Cancel
            </button>
            <!-- Next step -->
            <button class="mx-1 w-24"
              [size]="'md'"
              [disabled]="frmConfirmRight.invalid"
              app-ui-button
              [variant]="'primary'"
              cdkStepperNext>
              Next step
            </button>
          </footer>
        </form>
      </cdk-step>

感谢任何帮助。谢谢！

Answer 1

引用您的步进器，然后在适当的时候调用以下方法（此实现假定您从父组件引用步进器）：


@ViewChild('cdkStepper') cdkStepper: MatStepper | undefined;

someMethod(){
  if(this.cdkStepper){
    this.cdkStepper.reset()
  }
}

Answer 2

过了一段时间我发现

<button class="mx-1 w-24" [size]="'md'" app-ui-button [variant]="'default'"
   (click)="isShowModalStepper = !isShowModalStepper; cdkStepper.reset()">
    Cancel
</button>

如何重置为第一步 Angular stepper CDK？

How to reset to step one Angular stepper CDK?

html

javascript

angular

angular-cdk