angular - mat-stepper 前のボタンをクリックしたときに前方のステップをリセットする - Angular 6

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 の場合に選択された最初の 2 つのステップを設定します。

選択した現在のステップに基づいて前進/後退ステップをリセットしたい

• 現在のステップが 2 の場合。ステップ 1 が選択されているときに、ステップ 2 を選択解除/リセットしたい。

• 現在のステップが 1 の場合。ステップ 3 が選択されているときに、ステップ 2 も選択状態に設定したい。