我目前有一个从json服务器获取数据的服务：

import { Injectable } from '@angular/core';
import { Http,Response } from '@angular/http';
 
import { Observable } from 'rxjs/Observable';
 
import { User } from './user';
 
@Injectable()
export class UserService {
  constructor(private http: Http) {}
 
  private usersUrl = 'http://localhost:3000/users';
 
  getUsers(): Observable<User[]> {
    return this.http.get(this.usersUrl) //the request won't go out until something subscribes to the observable
                    .map(this.extractData)
                    .catch(this.handleError); // pass an error message back to the component for presentation to the user but only if we can say something the user can understand and act upon
  }
 
  private extractData(response: Response) {
    if (response.status < 200 || response.status >= 300) {
       throw new Error('Bad response status: ' + response.status);
    }
    let body = response.json(); // parse JSON string into JavaScript objects
 
    return body.data || { };
  }
 
  private handleError (error: any) {
    // In a real world app,we might send the error to remote logging infrastructure before returning/sending the error
   let errMsg = error.message || 'Server error'; // transform the error into a user-friendly message
 
   return Observable.throw(errMsg); // returns the message in a new,Failed observable
  }
 
}

我的组件：

import { Component,OnInit } from '@angular/core';
 
import { User } from '../common/user/user';
import { UserService } from '../common/user/user.service';
 
@Component({
  selector: 'app-nav',templateUrl: '/app/nav/nav.component.html',styleUrls: ['/app/nav/nav.component.css']
})
export class NavComponent implements OnInit {
  errorMsg: string;
  users: User[];
 
  constructor(private userService: UserService) { }
 
  getUsers() {
    this.userService
    .getUsers()
    .subscribe(
      function(users) {
        console.log('users ' + users);
        this.users = users;
        console.log('this.users ' + this.users);
      },function(error) {
        console.log('error ' + error);
      });
    // users => this.users = users,// error => this.errorMsg = <any>error);
  }
 
  ngOnInit() {
    this.getUsers();
    console.log('ngOnit after getUsers() ' + this.users);
  }
}

我的问题是,在getUsers()调用完成后,订阅函数返回的数据没有被传递/分配给我的Component属性’users’.我知道数据是从服务方法调用返回到组件的,因为我能够在userService().getUsers方法中记录数据.奇怪的是,我的ngOnInit上的console.log调用首先在我的开发控制台上打印在我的getUsers方法中的console.logs之前,尽管我首先调用了getUsers：

ngOnInit() {
    this.getUsers();
    console.log('ngOnit after getUsers() ' + this.users);
  }

Dev控制台截图：