шаг вперед в мат-степпере при нажатии на предыдущий - угловой 6 - PullRequest
Новая
       18

шаг вперед в мат-степпере при нажатии на предыдущий - угловой 6

0 голосов
/ 09 ноября 2018

Угловое 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.

...