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는 관찰 가능 상태가 될 때까지 사용할 수 있습니다. 그때까지는 예외를 피하기 위해 * ngIf를 사용하여 HTML 코드를 보호해야합니다.

Answer 2

각도 2 HTTP 요청은 다른 코드에서 비동기 적으로 실행되는 Observable을 반환합니다. ngOnInit()에서 Observable을 구독하면 getUsers()이 반환되고 구독 외에서는 console.log()이됩니다.

즉, 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