Angular material：线性步进器的程序化 "next"

Question

我想使用 angular material stepper but I need to do some asynchronous service call before proceeding to a second step. How can I achieve this? I could add a click handler to the next button but that will not wait for the async call to come back and proceed anyway. 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>

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

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

Angular material：线性步进器的程序化 "next"

Angular material: Programmatic "next" for linear stepper

angular-material2

angular

angular-material-stepper