Angular 4中的並行HTTP請求

Question

我正在構建一個簡單的天氣應用程序，該應用程序使用REST服務來顯示用戶輸入的任何城市中的當前天氣數據。

儀表板頁面應顯示用戶指定的〜5個城市的當前天氣。

所以我的問題是 - 給定一個由5個城市組成的數組，對於該數組中的每個元素，發出對REST服務（通過Angular服務）的調用的最佳方式是什麼。

下面是從我最初嘗試的代碼摘錄：

​​

但是，這會產生錯誤： 無法編譯。

c：/Projects/weather-app/src/app/components/dashboard/dashboard.component.ts（19,12）：屬性'weatherService'在類型'void'上不存在。

我意識到'forEach'不會在這裏工作 - 但在ng 4中這樣做的最佳做法是什麼？

謝謝。

Answer 1

這將map位置陣列中的觀測量的陣列， forkJoin會散發出值，當所有響應到位

Observable 
.forkJoin(this.locations 
    .map((element) => this.weatherService.getWeather(element)) 
.subscribe((data) => console.log(data)); 

Answer 2

問題是，使用函數關鍵字而不是箭頭函數，你會失去什麼this的含義。在使用函數關鍵字的函數內部，this引用該函數而不是您的組件類。

修改，以這樣的：

this.locations.forEach(element => { 
    this.weatherService.getWeather(element).subscribe((data) => { 
    console.log(data); 
    }); 
}); 

注意：您還可以考慮使用forkJoin包裹多個觀測。

你可以在這裏找到文檔：https://www.learnrxjs.io/operators/combination/forkjoin.html

但這裏的例子可能更有幫助：rxjs with multiple forkjoin when doing http requests