Angular4 HttpClient 응답을 어떻게 기다려야합니까?

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에있어!"라고 말하면서 ngOnInit에서 undefined를 기록한 다음 올바른 서비스 형태 인 getProjects()를 내 서비스에 기록합니다.

나는 어떻게 든 이것을 기다리고 있지만, 솔직히 말해서, 나는 잘 모릅니다. 나는 그것에서 약속을 만들려고 노력, 기다리고,지도 또는 .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); 
    }); 

}