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.