각도 4의 병렬 HTTP 요청

Question

REST 서비스를 사용하여 사용자가 입력 한 도시의 현재 날씨 데이터를 표시하는 간단한 날씨 앱을 구축 중입니다.

대시 보드 페이지는 사용자가 지정한 ~ 5 개 도시의 현재 날씨를 표시해야합니다.

제 질문은 - 배열의 각 요소에 대해 REST 서비스 (각도 서비스를 통해)를 호출하는 가장 좋은 방법은 무엇입니까?

locations: string[] = ["Seattle", "Woodinville", "Krasnoyarsk", "Stockholm", "Beijing"]; 
 

 
... 
 

 
ngOnInit() { 
 

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

 
    }

을하지만이 오류를 얻을 :

은 여기 내 초기 시도에서 인용 된 코드의 컴파일 실패 .

c : /Projects/weather-app/src/app/components/dashboard/dashboard.component.ts (19,12) : 'weatherService'속성이 'void'유형에 없습니다.

'forEach'가 여기서 작동하지 않는다는 것을 알고 있습니다.하지만 4에서이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

감사합니다.

Answer 1

Observable 인의 배열이 것 map 위치 배열, forkJoin 값을 방출 할 때 모든 응답을 위치에 있습니다

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

Answer 2

문제는 화살표 기능 대신 function 키워드를 사용하면 this의 의미를 잃는 것입니다. function 키워드를 사용하는 함수 내에서 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