angular - 角材料：线性步进器的程序化“下一步”

Question

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

在 html 模板中，我会有按钮：

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

在组件中：

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

有没有办法使用完成的步骤属性？

score 8 · Accepted Answer

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

<mat-horizontal-stepper #stepper linear>

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

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

在您的组件上，您可以调用您的服务并调用 step Advance（请注意，您需要包含来自 '@angular/material' 的 MatStepper）

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

1 回答 1