angular - 单击上一个 - Angular 6时，mat-stepper 重置前进步骤

Question

Angular 6 应用程序

stepper.component.html,

 <mat-horizontal-stepper #stepper (selectionChange)="selectedStep($event)">
    <ng-template matStepperIcon="edit">
      <mat-icon>check_circle</mat-icon>
    </ng-template>

    <ng-template matStepperIcon="number" let-index="index">
      <mat-icon>check_circle</mat-icon>
    </ng-template>

    <mat-step>
      <ng-template matStepLabel >Fill</ng-template>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel >Validate</ng-template>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>Complete</ng-template>
    </mat-step>
  </mat-horizontal-stepper>

stepper.component.ts,

@ViewChild('stepper') stepper: MatStepper;
stepIndex = 2;

ngAfterViewInit() {
  this.stepper._steps.forEach((step, index) => {
  const currentStepId = ++index;
  if (this.stepIndex >= currentStepId) {
    step.select(); //This will set the header selected state
   }
  });
}

selectedStep(matStep: any) {
 const selectedStep = ++matStep.selectedIndex;
 console.log(selectedStep);
}

上面的代码，将设置当 stepIndex 属性为 2 时选择的前两个步骤。

我想根据当前选择的步骤重置前进/后退步骤

• If current step is 2. When step 1 is selected, I want to deselect/reset the step 2.

• If current step is 1. When step 3 is selected, I want to set selected state for Step 2 also.

标签： angularangular-material-6angular-material-stepper

Answer 1

我刚刚找到了另一种解决方案，它看起来好多了，并且可以自动执行该过程：

<mat-horizontal-stepper [linear]="true" #stepper (selectionChange)="clearNextSteps($event)">
      <mat-step>

      </mat-step>
      <mat-step>

      </mat-step>
      <mat-step>

      </mat-step>
      <mat-step>
      </mat-step>
    </mat-horizontal-stepper>

并在组件中添加：

  @ViewChild('cinemaStep') cinemaStep: MatStep;
  @ViewChild('seatsStep') seatsStep: MatStep;
  @ViewChild('servicesStep') servicesStep: MatStep;
  @ViewChild('confirmStep') confirmStep: MatStep;

  clearNextSteps(stepper): void {
    const index = stepper.selectedIndex;
    switch (index) {
      case 0:
        this.seatsStep.reset();
      case 1:
        this.servicesStep.reset();
      case 2:
        this.confirmStep.reset();
    }
  }