web-dev-qa-db-ja.com

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

私は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;
}

user-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の値を記録すると、未定義と報告されます。

ここに私の改訂されたuser-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();
    }
}
arraysjsonangularrxjsangular2-http
18
Nho Jotom

コードを見てください：

 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 （ところで、本当に良いチュートリアルです。チェックアウトする必要があります）

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

Angular2内のHttpServiceは既にオブザーバブルを返しているため、ここで行ったように別のObservableをラップする必要はありません。

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

私が提供したリンクのガイドに従ってください。注意深く勉強すれば大丈夫です。

---編集----

まず第一に、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 observablesでサービスをもう一度構築します。

8
jmachnik