Question

您好，我的变量未定义存在问题。我确定这是因为可观察的匆忙还没有完成。这是导致问题的我的.ts文件中的代码部分：（如果需要提供更多代码和上下文，我会放置理解该问题所需的最少代码。另外，{{1} }从html的click事件中调用。）

myFunction

因此，这段代码在我的服务中调用了一个函数，该函数从api返回一些数据。问题是，当我尝试在订阅函数外部访问变量export class myClass { myVariable: any; myFunction() { this.myService.getApi().subscribe(data => { this.myVariable = data; }); console.log(myVariable) --> undefined } }时，它返回未定义的。我确定这是因为在我尝试访问myVariable

之前，订阅还没有完成

在尝试访问myVariable之前，有没有办法等待订阅完成？

谢谢！

Answer 1

为什么不创建单独的函数并在订阅中调用它。

export class myClass {
  myVariable: any;

  myFunction() {
    this.myService.getApi().subscribe(data => {
      this.myVariable = data;
      this.update()
    });

    this.update()
  }

  update(){
    console.log(this.myVariable);
  }
}

Answer 2

您知道，订阅是在服务器返回数据时执行的，而订阅代码的外部则是同步执行的。这就是为什么执行console.log之外的原因。上面的答案可以完成您的工作，但您也可以使用.map和return observable，如下所示。

假设您正在通过s服务调用它

export class myClass {
  myVariable: any;

  // calling and subscribing the method.
  callingFunction() {

    // the console log will be executed when there are data back from server
    this.myClass.MyFunction().subscribe(data => {
      console.log(data);
    });
  }
}


export class myClass {
  myVariable: any;

  // this will return an observable as we did not subscribe rather used .map method
  myFunction() {
    // use .pipe in case of rxjs 6 
    return this.myService.getApi().map(data => {
      this.myVariable = data;
      this.update()
    });
  }

}

Angular 2+等待订阅完成更新/访问变量

2 个答案: