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

Question

我想使用角度材料步进器，但在进行第二步之前我需要进行一些异步服务调用。我怎样才能做到这一点？我可以向下一个按钮添加一个点击处理程序，但这不会等待异步调用返回并继续进行。这是一个plnkr。

在 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>

在您的组件上，您可以调用您的服务并调用步骤提前（请注意，您需要包含来自“@angular/material”的 MatStepper）

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