Angular 从 API 检索数据答案

【问题标题】：Angular retrieve data from APIAngular 从 API 检索数据
【发布时间】：2018-07-24 20:29:23
【问题描述】：

我正在从不同的 API 检索数据，但遇到了一些问题。

第一部分运行良好，代码如下：

ngOnInit(): void {
  this.http.get('http://.../api/getData?table=getdata&filter=remediation_status:1')
    .subscribe( data => { this.incidents = data, console.log(data);})
}

对于第二步，我尝试使用在第一步中检索到的值从另一个 API URL 和同一组件中检索数据，但这些值被视为“未定义”。

For example `console.log(this.incidents); ` returns "undefined" while it's defined just above.

是否可以从 API 检索数据并将其用于同一组件（在 ngOnInit():) 中？提前谢谢你

【问题讨论】：

请指出问题并正确解释，这个一点都不清楚。您也可以提供minimal reproducible example。
@trichetriche 是的，不清楚，我编辑了我的问题

标签： angular api components

【解决方案1】：

我假设第二个代码在第一个代码之后，所以，让我稍微解释一下：
您的代码将以这种方式读取：

您的 HTTP 调用将启动，但不会停止代码流
该 HTTP 调用之后的代码将运行，即使 HTTP 未完成
您在 HTTP 调用中设置的变量将是未定义的，因为 HTTP 调用尚未完成
在某些情况下，您的变量将包含数据，因为 HTTP 调用将完成，但不是在您想要的那一刻

所以，有两种方法可以解决这个问题：

您可以将您拥有的第二个代码设置为一个函数，并从您的 HTTP 请求的 subscribe 方法中调用该函数，这样您将拥有您需要使用的数据
您可以使用 async 和 await 来等待，直到您的 HTTP 请求完成，然后继续执行代码，这意味着它会读取您的 HTTP 调用，但它不会继续执行您的代码，直到完成，您可以阅读更多关于这个here和here

【讨论】：