arrays - 从 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"
    }
]

用户.ts

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

用户服务.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();
        })
    }
...

用户.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();
    }
}
...

用户.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();
    }
}
...

!!!!!!!!!!最终工作解决方案 !!!!!!!!!!!这是最终工作解决方案的所有文件:

用户.ts

export class User {
    public firstName: string;
}

用户服务.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'));
    }
}

用户.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(顺便说一句。非常好的教程，你应该看看)

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

Angular2 中的 HttpService 已经返回一个 observable，所以你不需要像你在这里做的那样包装另一个 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 背景的人。

捕获另一个链接:https://scotch.io/tutorials/angular-2-http-requests-with-observables使用 RxJs observables 再次构建您的服务。