Angular 2+ 等待订阅完成 update/access 变量

Question

我的变量未定义时遇到问题。我确定这是因为 observable 还没有完成。这是我的 .ts 文件中导致问题的代码部分。（我放置了理解该问题所需的最少代码。另外 myFunction 从 HTML 中的点击事件中被调用）。

export class myClass {
  myVariable: any;

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

    console.log(myVariable) --> undefined
  }
}

所以这段代码在我的服务中调用了一个函数，该函数 returns 来自 API 的一些数据。问题是，当我尝试在订阅函数之外访问变量 myVariable 时，它 returns 未定义。我确定这是因为在我尝试访问 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

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

假设您从服务调用它

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+ 等待订阅完成 update/access 变量

Angular 2+ wait for subscribe to finish to update/access variable

subscribe

observable

angular