Шаг вперед при возврате мат-степпера при нажатии на предыдущий - угловой 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. Когда выбран шаг 1, я хочу отменить выбор / сбросить шаг 2.

• Если текущий шаг равен 1. Когда выбран шаг 3, я хочу также установить выбранное состояние для шага 2.

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();
    }
  }

Answer 2

    <mat-horizontal-stepper [linear]="true" #stepper>
      <mat-step #one>

      </mat-step>
      <mat-step #two>

      </mat-step>
      <mat-step #three>

      </mat-step>
      <mat-step #four>
        <button mat-button (click)="changeStep(0)">Go first</button>
      </mat-step>
    </mat-horizontal-stepper>

В коде компонента:

import {Component, ViewChild} from '@angular/core';

import {MatStep, MatStepper} from '@angular/material/stepper';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {

  @ViewChild('stepper') stepper: MatStepper;
  @ViewChild('one') one: MatStep;
  @ViewChild('two') two: MatStep;
  @ViewChild('three') three: MatStep;
  @ViewChild('four') four: MatStep;

  changeStep(index: number): void {
    this.four.reset(); // resets 4th
    this.three.reset(); //resets 3rd
    this.stepper.selectedIndex = index; // move selected index (in html I set 1st)
  } 
}

Вы перейдете к 1-му шагу, но 3-й и 4-й шаги будут сброшены.

Answer 3

Применение обоих вышеперечисленных решений не сработало для меня. Я не видел сброса шага. Однако это сработало, чтобы удалить любые данные, переносимые с одного шага на другой.