我該如何等待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響應？

回答

相關問題