angular2 observable、コンポーネント内で定義されていません

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

this.userは観察可能な状態になるとすぐに利用可能になります。それまでは例外を回避するためにHTMLコードを* ngIfで保護する必要があります。

Answer 2

角2のHTTPリクエストは、他のコードから非同期に実行されるObservableを返します。 ngOnInit()では、ObservableにサブスクライブするとgetUsers()が返され、サブスクリプションの外にはconsole.log()があります。

つまり、getUsers()が実際にユーザーを取得するHTTP要求を完了し、サブスクリプションがthis.usersに割り当てられる前に、console.log(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