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