我该如何等待Angular4 HttpClient响应？

我试图将我的Api调用移动到服务。到目前为止，我已经在需要它的每个组件中进行了api调用，这也导致将很多变量传递给其他组件，并且通常会导致我的代码中出现大量垃圾。因此，当我的api调用位于我的组件中，在那里我需要我请求的对象时，这一切都很好 - 我已经启动了HttpClient get方法，并且在收到正确对象时更新页面。我该如何等待Angular4 HttpClient响应？

现在，当我试图将其移动到一个服务时，它不会更新 - 我会在我的代码中解释它。

下面是我服务的方法：

getProjects(): any { 
    this.http.get<Project[]>('http://localhost:54639/api/tfs/projects').subscribe(data => { 
     console.log(data['value']); 
     return data['value']; 
    }); 
}

而这里的请求，这个方法我在我的分量上做：

ngOnInit(): void { 
    console.log("I'm in OnInit!"); 
    this.projects = this.ApiConnection.getProjects(); 
    console.log(this.projects); 
}

所以，这里的问题：我的控制台第一次登录“我在OnInit！”，然后从ngOnInit中记录未定义的数据，然后在我的服务中记录正确的数据格式getProjects（）。

我想以某种方式等待这个，但说实话，我不知道如何。我尝试着使用await，map或.then（）来尝试做出承诺，但它似乎并不奏效，而谷歌帮助不大。

编辑：呃，我知道它是异步的，我甚至在标题中指定了“如何等待”......问题是，我不知道如何在TypeScript和Angular4 HttpClient中做到这一点。我理应复制的主题中的答案是关于回调和前提，而我试图等待一个可观察....

来源

2017-09-07 Nech

'getProjects'没有返回值，即使它是'Observable '，你需要订阅它。 –

试试这个，

getProjects(): any { 
    return this.http.get<Project[]>('http://localhost:54639/api/tfs/projects').map(data => { 
     console.log(data['value']); 
     return data['value']; 
    }); 
}

而在你ngOnInit()

ngOnInit(): void { 
    console.log("I'm in OnInit!"); 
    this.ApiConnection.getProjects().subscribe(data =>{ 
    this.projects = data; 
    console.log(this.projects); 
    }); 

}

来源

2017-09-07 09:43:22

它编译，但是当我启动应用程序时，我在控制台中得到一个错误： this.ApiConnection.getProjects（...）。subscribe不是函数 at TfsComponent.webpackJsonp .../../../../../src/app/tfs/tfs.component.ts.TfsComponent.ngOnInit（tfs.component.ts：52） at checkAndUpdateDirectiveInline（ – Nech

）您需要将'getProjects'中的'subscribe'切换到'map'，然后在组件中使用'subscribe' –

我更新了在'getProject（）'方法中使用'map'而不是'subscribe'的答案，希望它现在可以工作 –

我该如何等待Angular4 HttpClient响应？

回答

相关问题