Angularサービスからオブジェクト配列を取得

Question

Angular（およびその点ではJavaScript）を初めて使用しています。私は、一連のユーザーを返すAngularサービスを作成しました。データはJSON形式のデータを返すHTTP呼び出しから取得されます。 HTTP呼び出しから返されたJSONデータを記録すると、この呼び出しが成功し、正しいデータが返されることがわかります。私は、ユーザーを表示するサービスを呼び出すコンポーネントと、ユーザーを表示するHTMLページを持っています。サービスからコンポーネントにデータを取得できません。 Observableを間違って使用していると思われます。たぶん私は間違って購読を使用しています。 ngInit関数のgetUsers呼び出しをコメントアウトしてgetUsersMock呼び出しのコメントを外すと、すべて正常に動作し、HTMLページのリストボックスにデータが表示されます。 JSONデータをサービスの配列またはリストに変換したいのですが、サービスからJSONを返してコンポーネントに変換させるのではなく、

データは、ユーザーを取得するためにHTTP呼び出しから返された：

[ 
    { 
     "firstName": "Jane", 
     "lastName": "Doe" 
    }, 
    { 
     "firstName": "John", 
     "lastName": "Doe" 
    } 
] 

user.ts

export class User { 
    firstName: string; 
    lastName: string; 
} 

ユーザーservice.ts

... 
@Injectable 
export class UserService { 
    private USERS: User[] = [ 
     { 
      firstName: 'Jane', 
      lastName: 'Doe' 
     }, 
     { 
      firstName: 'John', 
      lastName: 'Doe' 
     } 
    ]; 

    constructor (private http: Http) {} 

    getUsersMock(): User[] { 
     return this.USERS; 
    } 

    getUsers(): Observable<User[]> { 
     return Observable.create(observer => { 
      this.http.get('http://users.org').map(response => response.json(); 
     }) 
    } 
... 

user.component.ts

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

    constructor(private userService: UserService) {} 

    ngOnInit(): void { 
     this.getUsers(); 
     //this.getUsersMock(); 
    } 

    getUsers(): void { 
     var userObservable = this.userService.getUsers(); 
     this.userObservable.subscribe(users => { this.users = users }); 
    } 

    getUsersMock(): void { 
     this.users = this.userService.getUsersMock(); 
    } 
} 
... 

user.component.html

... 
<select disabled="disabled" name="Users" size="20"> 
    <option *ngFor="let user of users"> 
     {{user.firstName}}, {{user.lastName}} 
    </option> 
</select> 
... 

！更新！

私は「ヒーローズ」チュートリアルを読んでいたが、私のために働いていなかったので、私は外に出て他のものを試した。ヒーローチュートリアルで説明した方法でコードを再実装しました。しかし、this.usersの値を記録すると、未定義が報告されます。

は、ここに私の改訂ユーザーservice.ts

ここ

... 
@Injectable 
export class UserService { 
    private USERS: User[] = [ 
     { 
      firstName: 'Jane', 
      lastName: 'Doe' 
     }, 
     { 
      firstName: 'John', 
      lastName: 'Doe' 
     } 
    ]; 

    constructor (private http: Http) {} 

    getUsersMock(): User[] { 
     return this.USERS; 
    } 

    getUsers(): Promise<User[]> { 
     return this.http.get('http://users.org') 
      .toPromise() 
      .then(response => response.json().data as User[]) 
      .catch(this.handleError); 
    } 
... 

である私の改訂user.component.ts

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

    constructor(private userService: UserService) {} 

    ngOnInit(): void { 
     this.getUsers(); 
     //this.getUsersMock(); 
    } 

    getUsers(): void { 
     this.userService.getUsers() 
      .then(users => this.users = users); 

     console.log('this.users=' + this.users); // logs undefined 
    } 

    getUsersMock(): void { 
     this.users = this.userService.getUsersMock(); 
    } 
} 
... 

です!!!!!!!!!!最終的な解決策!!!!!!!!!! これは、すべての最終作業溶液用のファイルです：

user.ts

export class User { 
    public firstName: string; 
} 

user.service.ts

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

import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 

import { User } from './user'; 

@Injectable() 
export class UserService { 
    // Returns this JSON data: 
    // [{"firstName":"Jane"},{"firstName":"John"}] 
    private URL = 'http://users.org'; 

    constructor (private http: Http) {} 

    getUsers(): Observable<User[]> { 
     return this.http.get(this.URL) 
      .map((response:Response) => response.json()) 
       .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
    } 
} 

user.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Router }    from '@angular/router'; 

import { User }  from './user'; 
import { UserService } from './user.service'; 


@Component({ 
    moduleId: module.id, 
    selector: 'users-list', 
    template: ` 
     <select size="5"> 
      <option *ngFor="let user of users">{{user.firstName}}</option> 
     </select> 
    ` 
}) 

export class UserComponent implements OnInit{ 
    users: User[]; 
    title = 'List Users'; 

    constructor(private userService: UserService) {} 

    getUsers(): void { 
     this.userService.getUsers() 
      .subscribe(
       users => { 
        this.users = users; 
        console.log('this.users=' + this.users); 
        console.log('this.users.length=' + this.users.length); 
        console.log('this.users[0].firstName=' + this.users[0].firstName); 
       }, //Bind to view 
          err => { 
         // Log errors if any 
         console.log(err); 
        }) 
    } 

    ngOnInit(): void { 
     this.getUsers(); 
    } 
} 

Answer 1

あなたのコードを見てください：

getUsers(): Observable<User[]> { 
     return Observable.create(observer => { 
      this.http.get('http://users.org').map(response => response.json(); 
     }) 
    } 

およびコードhttps://angular.io/docs/ts/latest/tutorial/toh-pt6.html （BTW。本当に良いチュートリアル、あなたはそれをチェックアウトする必要があります）

getHeroes(): Promise<Hero[]> { 
    return this.http.get(this.heroesUrl) 
       .toPromise() 
       .then(response => response.json().data as Hero[]) 
       .catch(this.handleError); 
    } 

HTTPServiceのAngular2はすでに、観察を返すの内側に、souがあなたがここでやったように周り別の観測をラップする必要はありません。

return Observable.create(observer => { 
     this.http.get('http://users.org').map(response => response.json() 

をしてみてください私が提供したリンクのガイドに従ってください。あなたはそれを慎重に勉強すればいいだけです。

--- EDIT ----あなたは変数this.usersを記録し、すべての

初？ JavaScriptはそのようには機能しません。あなたの変数は未定義で、コード実行命令のためうまくいきます！このようにそれを行うには

試してみてください。

getUsers(): void { 
     this.userService.getUsers() 
      .then(users => { 
       this.users = users 
       console.log('this.users=' + this.users); 
      }); 


    } 

はconsole.log（...）がある場合を参照してください！

toPromise（）から辞任しようとすると、RxJsバックグラウンドのないpplのように見えます。

他のリンクをキャッチ：https://scotch.io/tutorials/angular-2-http-requests-with-observables RxJsの観測情報を使用してもう一度サービスを構築してください。