角材：リニアステッパーのプログラム「次へ」

Question

angular material stepperを使用しますが、2番目の手順に進む前に非同期サービスコールを行う必要があります。どうすればこれを達成できますか？私は次のボタンにクリックハンドラを追加することができますが、それは非同期呼び出しが戻って来て、とにかく進むのを待つことはありません。 Here is a plnkr。コンポーネントで

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

：

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

completed step属性を使用して、方法はあるHTMLテンプレートで

私がボタンを持っているでしょうか？

Answer 1

まず、あなたが通常の1にステップボタンを変更することができますあなたの隣には、あなたのステッパーに

<mat-horizontal-stepper #stepper linear> 

をindentifierを含めることができます。

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

あなたのコンポーネントに、あなたのサービスとコールを呼び出すことができますステップアドバンス（「@角度/マテリアル」のMatStepperを含める必要があることに注意してください）

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