Question

Angular 6服务

getProjectEpics(id: string): Observable<any> {
return this.http.get<any>(this.baseUrl + 'getEpics/' + id);
}

组件角度6

projectEpics=[];
getProjectEpics(id: string) {
this.epicService.getProjectEpics(this.id).subscribe(
  next => {
    console.log('RESPONSE', next);
    this.projectEpics = next[0].epics;
    console.log(this.projectEpics); // array has data
  },
  error => {
    this.alertify.error(error);
  }
);
console.log(this.projectEpics); // The array is empty at this log.
}

我使用的是Angularr6。我有一个方法在serive中返回任何 getProjectEpics 类型的observable，该方法正在调用API。然后在我的组件中，我订阅了可用于服务的可观察方法。我成功地从API中获取了数据，并得到了服务，但是问题是，当我将下一个对象中存在的数据分配给我的本地数组 projectEpics 并在控制台旁边登录projectEpics数组时，它将显示该数组，但是，当我在下一个或外部订阅时登录时，projectEpics数组为空，不显示任何数据。

Answer 1

这是使用异步调用时的工作方式，您只能访问该作用域/线程中的变量。您可以使用服务/ RxJS主题/ ...与外界进行交流

Answer 2

可观察性本质上是异步的。 Javascript是一个单线程环境，它检测到的所有异步任务都将移交给封闭环境（浏览器，NodeJS等），以在单独的线程中执行它。当javascript尝试运行您的代码时，它将执行以下操作：

主线程调用getProjectEpics（）
检查语句this.epicService.getProjectEpics（）并执行该操作
主线程执行您的最后一个console.log（）-即使在第二步完成之前，也会发生这种情况

在最后一个console.log（）语句中，数组为空，因为它不会等待API调用完成。

有关详细说明，请参见https://www.youtube.com/watch?v=8aGhZQkoFbQ

从订阅获取数据并分配给局部变量

2 个答案: