Wie kann der Angular5 httpclient Antwort zugreifen?

Question

Exportklasse AppComponent implementiert OnInit {

userObservable: any = {};

Konstruktor (privat Httpclient: Httpclient) {}

ngOnInit(): void {

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); 

}

, wenn die letzte Konsole Anweisung ausgeführt wird, ist der angezeigte Wert null. Ich muss die httpclient Antwort in anderen Komponenten meiner Anwendung manipulieren. wie kann ich das machen?

Answer 1

Es ist, weil Ihre letzte console.log() -Anweisung ausgelöst wird, bevor Sie Ihre HTTP-Antwort erhalten. Was würde ich vorschlagen, ist eine Dienstleistung in Anspruch:

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; 
     } 
    ); 
    } 
} 

können Sie Ihre Userdata in jeder Komponente erhalten mit dem Service.