角材料：線性步進的程序“下一步”

Question

我想使用角形材料步進器，但是在進行第二步之前，我需要進行一些異步服務調用。 我該如何實現？ 我可以在下一個按鈕上添加一個點擊處理程序，但這不會等待異步調用返回並繼續進行。 這是一個plnkr 。

在html模板中，我將具有以下按鈕：

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

在組件中：

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

有沒有辦法使用完成的 step屬性？

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();
  }