Angular2 – OnInit：从Service’subscribe函数返回的值未分配给Component字段/ s

我正在尝试Angular2,并一直在关注他们的教程.

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

@H_944_3@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 } }

我的组件：

@H_944_3@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：

@H_944_3@ngOnInit() { this.getUsers(); console.log('ngOnit after getUsers() ' + thiS.Users); }

Dev控制台截图：