angular2 observable，在组件中得到undefined

Question

我是angular2上的新手，我需要一些帮助。 我正在使用下面的服务类。

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

当我在下面的组件调用上面的服务时，我得到未定义的值。

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

但是，如果我试图记录服务类中的控制台的值，它显示在那里。任何帮助将是非常可观的。 谢谢

Answer 1

这个用户在observable准备就绪后就可以使用，直到那时你必须用* ngIf保护你的HTML代码以避免异常。

Answer 2

Angular 2 HTTP请求返回从其他代码异步运行的Observable。在ngOnInit()中，您订阅了getUsers()返回的Observable，然后在订阅之外，您拥有console.log()。

换句话说，console.log(this.users)在getUsers()实际完成HTTP请求以实际获取用户之前以及在订阅将其分配给this.users之前正在运行。

阿尔特ngOnInit()像这样，你会看到预期的结果：

ngOnInit(){ 
    this._service.getUsers() 
     .subscribe(result => { 
      this.users = result; 
      console.log(this.users); 
     }); 
} 

参见：

RxJS docs on Observables

Angular 2 docs on the HTTP client