Ожидание ответа с сервера по запросу http в Angular 2

Question

У меня есть небольшая проблема с моим приложением Angular2. Я хочу получить некоторые данные с сервера для моего входа в систему, но мой код идет вперед, и у меня много ошибок. Я хочу ждать ответа от сервера, а затем делать что-то с моими данными.

Это мой код:

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

Как я заметил, что мой код будет для цикла, пока я не получу ответа от сервера, поэтому я вернусь только пустой массив. Кто-нибудь может мне помочь?

Answer 1

В этой службе вы должны вернуть Observable, на который может подписаться ваш компонент. Он не может работать так, как вы это делаете, из-за асинхронного режима запроса get.

В качестве предложения, ваш сервис может выглядеть подобно этому

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

И соответствующую часть компонента, как это:

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

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