angular2 osservabile, diventando indefinito nel componente

Sono nuovo su angular2, ho bisogno di aiuto. Sto usando sotto la class di servizio.

import {Injectable} from 'angular2/core'; import {Http} from 'angular2/http'; import 'rxjs/add/operator/map'; @Injectable() export class UsersService { private _url = "http://jsonplaceholder.typicode.com/users"; constructor(private _http: Http){ } getUsers(){ return this._http.get(this._url) .map(res => res.json()); } } 

quando chiamo sopra il servizio nel sotto componente, ottengo un valore non definito.

 import{Component, OnInit} from 'angular2/core'; import{UsersService} from './users.service'; @Component({ selector: 'users', template:'In users', //templateUrl: 'app/users.component.html', providers: [UsersService] }) export class UsersComponent implements OnInit{ users: any[]; constructor(private _service: UsersService){ } ngOnInit(){ this._service.getUsers() .subscribe(result => this.users = result); console.log(this.users); } } 

Ma se provassi a registrare il valore nella console nella class di servizio, lì viene mostrato. qualsiasi aiuto sarebbe molto apprezzabile. Grazie

Richieste HTTP Angular 2 restituiscono Observables che vengono eseguiti in modo asincrono da altro codice. In ngOnInit() , ti iscrivi al Observable che getUsers() restituisce, e quindi al di fuori della sottoscrizione, hai il console.log() .

In altre parole, console.log(this.users) è in esecuzione prima che getUsers() abbia effettivamente completato la richiesta HTTP per ottenere effettivamente gli utenti e prima che la sottoscrizione li abbia assegnati a this.users .

Alter ngOnInit() piace così e vedrai il risultato desiderato:

 ngOnInit(){ this._service.getUsers() .subscribe(result => { this.users = result; console.log(this.users); }); } 

Guarda anche:

Documenti RxJS su Osservabili

Angular 2 documenti sul client HTTP

this.user sarà disponibile non appena l’osservabile sarà pronto, fino ad allora, devi proteggere il tuo codice HTML con * ngIf per evitare eccezioni.