angular5 httpclientの回答にはどのようにアクセスできますか？

Question

エクスポートクラスAppComponentはOnInit {

userObservable：any = {}を実装します。

コンストラクタ（プライベートのHttpClient：のHttpClient）{}

ngOnInit（）：最後のコンソール・ステートメントが実行されたときにボイド{

this.httpClient.get<UserResponse>("http://localhost:9000/home") 
    .subscribe(data => {console.log(data.status); 
         console.log(data.password); 
         this.userObservable = data; 
         console.log('Result ==> ',this.userObservable); 
         }, 
       error => {} 
); 
console.log(this.userObservable); 

}

、表示された値がnullです。私はアプリケーションの他のコンポーネントでhttpclientの答えを操作する必要があります。どうやってやるの？

Answer 1

http応答を得る前に、最後のconsole.log（）文が起動するからです。サービスを使用することをお勧めします：

export class AppComponent implements OnInit { 
    constructor(private userService: UserService) {} 

    ngOnInit(): void { 
    this.userService.getUserData().subscribe(data => { 
     console.log("Data :", data, "Data from service :", this.userService.userObservable); 
     // DO OTHER STUFF 
    }); 
    } 


} 

// Service 
import { Injectable } from "@angular/core"; 
import { HttpClient } from "@angular/common/http"; 
@Injectable() 
    export class UserService { 
    userObservable: any = {}; 

    constructor(private httpClient: HttpClient) {} 

    getUserData() { 
    this.httpClient.get<UserResponse>("http://localhost:9000/home").subscribe(
     data => { 
     this.userObservable = data; 
     console.log("Result ==> ", this.userObservable); 
     return data; 
     }, 
     error => { 
     return error; 
     } 
    ); 
    } 
} 

サービスを使用するすべてのコンポーネントでuserDataを取得することができます。