角度材料：线性步进器的编程“下一步”

Question

我想使用angular material stepper，但我需要先进行一些异步服务调用，然后再继续第二步。我怎样才能做到这一点？我可以为下一个按钮添加一个单击处理程序，但不会等待异步调用返回并继续。 Here is a plnkr

在html模板中我会有按钮：

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

在组件中：

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

有没有办法使用completed步骤属性？

Answer 1

首先，您可以在步进器中包含一个标识符，

<mat-horizontal-stepper #stepper linear>

接下来，您可以将步骤按钮更改为正常按钮：

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

在您的组件上，您可以致电您的服务并致电步骤（请注意，您需要包含来自＆＃39; @ angular / material＆＃39;的MatStepper）

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