Угловой материал: программный "следующий" для линейного степпера

Question

Я хочу использовать угловой шаговый материал, но мне нужно сделать асинхронный сервисный вызов, прежде чем перейти ко второму шагу. Как мне этого добиться? Я мог бы добавить обработчик щелчка к следующей кнопке, но он не будет ждать, пока асинхронный вызов вернется и все равно продолжится. Вот плнкр.

В шаблоне HTML у меня будет кнопка:

  <button mat-button matStepperNext (click)="onNext()">Next</button>

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

  onNext() {
     let promise = service.validateData()
  }

Есть ли способ использовать атрибут выполненного шага?

Answer 1

Сначала вы можете включить идентификатор вашего степпера,

<mat-horizontal-stepper #stepper linear>

Далее вы можете изменить кнопку шага на обычную:

<button mat-button (click)="onNext(stepper)">Next</button>

На вашем компоненте вы можете позвонить в ваш сервис и вызвать шаг вперед (обратите внимание, что вам нужно включить MatStepper из "@angular/material")

onNext(stepper: MatStepper) {
     let promise = service.validateData();
     stepper.next();
  }