Question

我正在尝试将Api呼叫转移到服务中。到目前为止，我已经在需要它的每个组件中进行了api调用，这也导致将大量变量传递给其他组件，并且通常会导致代码中出现大量垃圾。

所以，当我的api调用在我的组件中时，我需要我请求的对象，一切都很好 - 我已经启动了HttpClient get方法，并且在收到正确的对象时更新页面。

现在，当我尝试将其移至服务时，它不会更新 - 我将在我的代码中解释它。

以下是我服务中的方法：

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！”，然后记录undefined - 都来自ngOnInit，然后它在我的服务中记录正确的数据形式getProjects（）。

我试图以某种方式等待这一点，但说实话，我不知道如何。我尝试使用await，map或.then（）尝试做出承诺，但它似乎没有用，谷歌没有多大帮助。

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

Answer 1

试试这个，

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);
  });

}

我如何等待Angular4 HttpClient响应？

1 个答案: