1

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.

4

2 回答 2

0

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

<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();
    }
  }
于 2020-11-09T10:39:41.177 回答
0 
    <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 步将被重置

于 2020-11-09T10:07:52.993 回答