Блог

У меня есть список элементов, и у каждого элемента есть кнопка для отображения модального шагового модуля. Когда я нажимаю кнопку элемента 1 с id = «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>
  

Любая помощь приветствуется. Спасибо вам!

Через некоторое время я нашел

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

Обратитесь к вашему шаговому устройству, а затем вызовите следующий метод в соответствующее время (эта реализация предполагает, что вы ссылаетесь на шаговое устройство из родительского компонента):

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

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