web-dev-qa-db-fra.com

Angular Stepper avec selectedIndex set matStepperNext / matStepperPrevious ne fonctionne pas

Im utilisant un matStepper et quand je mets l'index selectedIndex à 3, je ne peux pas naviguer en utilisant le suivant et le précédent. je peux cliquer sur le (1) dans le stepper horizontal puis utiliser le suivant/précédent comme d'habitude. Tous les formulaires sont valides et je peux naviguer en utilisant next de 1-7 après avoir cliqué sur (1).

Notez que j'ai this.selectedIndex = 3; codé en dur

<mat-horizontal-stepper #stepper
                        [linear]="true"
                        [selectedIndex]="this.selectedIndex"
                        (selectionChange)="selectionChange(stepper)">

  <mat-step [stepControl]="form1">
    <app-observer-information></app-observer-information>
  </mat-step>
...
  <mat-step [stepControl]="form7">
    <app-observer-agreement></app-observer-agreement>
  </mat-step>

</mat-horizontal-stepper>



export class ObservationStatementStepperComponent implements OnInit {

  @ViewChild('ObserverInformationComponent') public component1: ObserverInformationComponent;
  ..
  @ViewChild('ObserverAgreementComponent') public component7: ObserverAgreementComponent;

  public selectedIndex: number;

  constructor(private sorDataService: SorDataService) {

    this.selectedIndex = 3; // Number(sorDataService.selectedIndex);
  }

  public ngOnInit() {
  }

  public selectionChange(stepper) {

    this.sorDataService.synchronizeStepper(stepper.selectedIndex + 1);
  }

  /**
   * @see https://stackoverflow.com/questions/48498966/angular-material-stepper-component-for-each-step
   */
  get form1() {
    return this.component1 ? this.component1.form : null;
  }
  ...
  get form7() {
    return this.component7 ? this.component7.form : null;
  }
}

Le problème est reproduit dans stackblitz 

<mat-horizontal-stepper linear #stepper [selectedIndex]="1">

https://stackblitz.com/edit/angular-syml71?file=app/create-profile.component.html

angularangular-materialangular6angular-material-stepper
10
Ricardo Saracino

Piratage rapide:

HTML:

<mat-vertical-stepper [linear]="true" #stepper>

TS:

 @ViewChild('stepper')
  stepper: MatStepper;
 
 nextClick(): void {
    this.stepper.linear = false;
    this.stepper.selectedIndex = ...;
    this.stepper.linear = true;
}
9
Oleg

Pour que cela fonctionne avec [linear]="true", utilisez une fonction setTimeout avec 0 retard:

setTimeout(() => {
  this.stepper.selectedIndex = ...;
});

Référence: https://github.com/angular/components/issues/8479#issuecomment-444063732

0
phanf