mat-stepper web api之间的步骤调用

Question

我正在使用来自Angular material的mat-stepper，并且想知道是否有办法阻止步进器继续下一步，直到返回用于保存当前表单的Web API调用。 / p>

我正在使用Reactive表单，并且通过阻止用户进行下一步直到所有元素都通过验证来进行验证。但是，一旦满足此条件，我想阻止Next按钮，直到我的Web API调用保存当前表单已成功返回。

由于

Answer 1

您必须在组件中创建一个处理程序并传递步骤索引，如下所示：

HTML：

1. <mat-horizontal-stepper linear="true" #stepper>
2. <button mat-button matStepperNext (click)="ApiCallHandler(0)">Next</button>

组件：

1. @ViewChild('stepper') stepper;
  stepperHandler(index){
      this.stepper.selectedIndex = index;
  }
2. stepperHandler(index){
        this.stepperHandler(index);
        //Do ur Api call
        this.stepperHandler(index+1);
    }

希望这会对你有所帮助