サービスに格納されている非同期データを取得する方法は？

Question

私はhttpからデータを取得しており、配列内の同じサービス内に格納しています。

export class UserService { 
    myusers: User[]; 
    constructor(private http: HttpClient) {} 
    getUsers() { 
    return this.http.get<User[]>('https://randomuser.me/api/results=5') 
    .subscribe(data => { this.myusers = data['results']}); } 
} 

myusersをcomponent.tsでコンソール化すると、「未定義」と表示されます。

export class UserComponent implements OnInit { 
    constructor(private service: UserService) { } 
    ngOnInit() { 
    this.service.getUsers(); 
    console.log(this.service.myusers); //undefined 
    } 
} 

this.service.myusersにはどのようにアクセスできますか？いけないのは、サービスのmyusers配列ではないコンポーネントの配列にデータを格納するソリューションを提案してください。

Answer 1

APIからデータを返すのに少し時間がかかるため、ジョブの完了に関するサービスからのコールバックが必要です。

export class UserService { 
    myusers: User[]; 
    constructor(private http: HttpClient) {} 
    getUsers() { 
     return this.http.get<User[]>('https://randomuser.me/api/results=5'); 
    } 
    setUsers (users: User[]) { 
     this.myusers = users; 
    } 
} 

コール以下のような機能：

export class UserComponent implements OnInit { 
    constructor(private service: UserService) { } 
    ngOnInit() { 
    this.service.getUsers() 
    .subscribe(data => { this.service.setUsers(data); console.log(data); }); 
    } 
} 

が、これは

Answer 2

あなたのサービスのようにする必要があり、あなたの目的を果たしていないなら、私に教えてください。

import {Injectable} from '@angular/core'; 
    import {Http, Response} from '@angular/http'; 
    import {Observable} from 'rxjs/Observable'; 

    @Injectable() 

    export class UserService { 
     constructor(private http: Http) {} 

     getUsers(): Observable<void> { 
      const url = 'https://randomuser.me/api/results=5'; 
      return this.http.get(url).map(
       (res: Response) => { 
        return res.json() as = User[]; 
       }).catch(
       (error: Response) => { 
        return Observable.throw(error.json()); 
       }); 
     } 
    } 

コンポーネントは

export class UserComponent implements OnInit { 
    users: User[] = []; 

    constructor(private userService: UserService) { } 

    ngOnInit() { 
    this.getUsers(); 
    } 

    private getUsers(): void { 
     this.userService.getUsers().subscribe(
     (response: User[]) => { 
      this.users = response; 
      console.log(response); 
     ); 
    }  
} 

ノートのようにする必要があります：タイプのスクリプトに基づいてangular4。ベストプラクティスごとにメソッドと変数に型を割り当てる必要があります。

Answer 3

あなたは常にrxjsのドキュメントに見てくださいObservable.of

valores=[{id:1,nombre:"uno"},{id:2,nombre:"dos"},{id:3,nombre:"tres"}]; 

getUsers() 
{ 
    if (this.valores) 
     return Observable.of(this.valores); 
    else 
     return this.http.get(url).map((response)=> 
     this.valores=... 
     ...); 
}