In attesa di una risposta dal server su richiesta http in Angular 2

Question

Ho un piccolo problema con la mia app Angular2. Voglio ottenere alcuni dati dal server per il mio login utente, ma il mio codice sta andando avanti e ho un sacco di bug con esso. Voglio aspettare la risposta dal server, quindi fare qualcosa con i miei dati.

Questo è il mio codice:

import { Injectable } from '@angular/core'; 
import { Http, Response, Headers } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import { User } from './user'; 

@Injectable() 

export class UserService { 

    public usersTmp: Array<Object> = new Array<Object>(); 
    public users: Array<User>; 
    public user: User = new User(); 
    public noteToSend; 
    constructor(private http: Http) { } 

    getUsers() { 
     var headers = new Headers(); 
     headers.append('Accept', 'q=0.8;application/json;q=0.9'); 

     this.http.get('/AngularApp/api/users', { headers: headers }) 
      .map((res: Response) => res.json()) 
      .subscribe(
      data => { 
       console.log(data); 
       this.usersTmp = data; 
      }, 
      err => console.error(err), 
      () => console.log('done') 
      ); 

     this.users = new Array<User>(); 
     for (var i = 0; i < this.usersTmp.length; i++) { 
      this.user = new User(); 
      this.user.id = this.usersTmp[i]["userId"]; 
      this.user.name = this.usersTmp[i]["userName"]; 
      this.user.email = this.usersTmp[i]["userEmail"]; 
      this.user.pass = this.usersTmp[i]["userPassword"]; 

      this.users.push(this.user); 

     } 
     return this.users; 
    } 

Come ho notato che il mio codice sta per il ciclo for fino a ottenere risposta dal server, in modo da tornare gamma appena vuoto. Qualcuno può aiutarmi con quello?

Answer 1

Nel servizio, è necessario restituire lo Observable al quale il componente può effettuare la sottoscrizione. Non può funzionare nel modo in cui lo fai a causa della modalità asincrona della richiesta get.

Come una proposta, il servizio potrebbe essere simile a questo

getUsers() { 
    let headers = new Headers(); 
    headers.append('Accept', 'q=0.8;application/json;q=0.9'); 

    return this.http.get('/AngularApp/api/users', { headers: headers }) 
     .map((res: Response) => res.json()); 
} 

E la parte rilevante del componente in questo modo:

constructor(private userService:UserService) { 
    this.userService.getUsers().subscribe(
     data => this.iterateOverUsers(data)); 
} 

iterateOverUsers(data) { 
    // here comes your for loop 
}