Question

我正在使用Angular material2的Stepper组件和Angular4

的Component1

<mat-horizontal-stepper #stepper>
<mat-step></mat-step>
<mat-step></mat-step>
</mat-horizontal-stepper>

<button class="buttonImg" id="buttonnxt" (click)="goForward(stepper)" 
type="button"></button>`

goForward(stepper) {

this.stepperCurrentIndex = stepper;

switch (this.stepperCurrentIndex) {
 case 0: {
   this.project0linking()
   //before project0linking() containing asynchronous call should 
   finish after that stepper.next should be called
   stepper.next();
   break;
 }
  case 1: {
    this.project1linking();
    //before project1linking() containing asynchronous call should 
    finish after that stepper.next should be called
    stepper.next();
    break;
     }
  case 2: {
    this.project2linking();
    //before project2linking() containing asynchronous call should 
    finish after that stepper.next should be called
    stepper.next();
    break;
      }
  }
}

然后执行另一个包含http调用的函数，它在另一个组件中，所以我能够在component1中得到http调用的响应，但是只有在得到http的响应后才能执行stepper.next（）方法致电

project0linking(){
 //http call
 Only after completion of this call stepper.next() should be called
}

我已经尝试将“stepper”传递给另一个函数，但因为它是Stepper组件的一个对象，并且它有selectedIndex值和next（）方法，所以它不起作用。还尝试使用 proto 访问库以访问另一个函数中的next（），能够找到next（）函数，但它接受两个参数索引和步长的长度，在传递它时接受投掷长度未定义的。

Answer 1

在Angular documentation

的文档中查看HttpClient

您可以设置订阅的订阅并调用里面的步进器。

http.get('/api/items').subscribe(() => {
   stepper.next();
});

在Angular material2 Matstepper中实现异步行为

1 个答案: