init step из параметров URL - PullRequest
Новая
       19

init step из параметров URL

0 голосов
/ 30 мая 2018

Я хочу инициализировать индекс моего степпера по параметру в URL.

Я хорошо восстанавливаю параметр, но мой степпер не отображается.

Мой URL: http://localhost/toto?stepNumber=0

Мой код: 

stepNumber: Observable<number>;
ngOnInit() {
    this.stepNumber = this.route.queryParams.map(param => param.stepNumber);
    this.stepNumber.subscribe(stepNumber => {
        this.stepper.selectedIndex = stepNumber;
    })

}

Степпер работает с этим кодом: 

ngOnInit() {
    this.stepper.selectedIndex = 1;
}

Я думаю, что это наблюдаемая проблема

Код для отображения: 

<mat-horizontal-stepper [linear]="true" #stepper>
  <mat-step [stepControl]="nameForm" label="Give it a name!">
    <form [formGroup]="nameForm">
      <mat-form-field>
        <input matInput placeholder="Resource's name" formControlName="name">
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Summon</button>
      </div>
    </form>
  </mat-step>
  <mat-step label="Summoning" [completed]="isComplete()"  [editable]="false">
      <div fxLayout="column" fxLayoutAlign="center center" style="margin-top: 24px">
          <mat-spinner></mat-spinner>
          <h2>{{STATUS_LABEL[status]}}</h2>
      </div>
  </mat-step>
  <mat-step label="Result" [editable]="false">
    <div *ngIf="status === 'SUCCESS'" fxLayout="column" fxLayoutAlign="center center" style="margin-top: 24px">
        <span class="img alive"></span>
    </div>
    <h2 *ngIf="status === 'FAILURE'">That resource warped into the void :(</h2>
  </mat-step>
</mat-horizontal-stepper>
...