Arrays 从角度服务获取对象数组_Arrays_Json_Angular_Rxjs_Angular2 Http

Arrays 从角度服务获取对象数组

arrays json angular rxjs

Arrays 从角度服务获取对象数组,arrays,json,angular,rxjs,angular2-http,Arrays,Json,Angular,Rxjs,Angular2 Http,我对Angular（以及Javascript）是新手。我已经编写了一个Angular服务，它返回一个用户数组。从HTTP调用中检索数据，该调用以JSON格式返回数据。当记录从HTTP调用返回的JSON数据时，我可以看到该调用成功并返回了正确的数据。我有一个调用服务以获取用户的组件和一个显示用户的HTML页面。我无法将数据从服务获取到组件。我怀疑我不正确地使用了可观察的。也许我也用错了订阅。如果我在ngInit函数中注释掉getUsers调用并取消注释getUsersMock调用，一切都会正常工作

我对Angular（以及Javascript）是新手。我已经编写了一个Angular服务，它返回一个用户数组。从HTTP调用中检索数据，该调用以JSON格式返回数据。当记录从HTTP调用返回的JSON数据时，我可以看到该调用成功并返回了正确的数据。我有一个调用服务以获取用户的组件和一个显示用户的HTML页面。我无法将数据从服务获取到组件。我怀疑我不正确地使用了可观察的。也许我也用错了订阅。如果我在ngInit函数中注释掉getUsers调用并取消注释getUsersMock调用，一切都会正常工作，我会看到HTML页面中列表框中显示的数据。我希望将JSON数据转换为服务中的一个数组或用户列表，而不是从服务返回JSON并让组件进行转换

从获取用户的HTTP调用返回的数据：

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

user.ts

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

export class User {
    public firstName: string;
}

用户服务

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

...
@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);
    }
...

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.html

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

！！！！！！！！！！最终工作解决方案！！！！！！！！！！这是最终工作解决方案的所有文件：

user.ts

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

export class User {
    public firstName: 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();
        })
    }
...

...
@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);
    }
...

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'));
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
从“rxjs/Observable”导入{Observable}；
导入“rxjs/add/operator/catch”；
导入'rxjs/add/operator/map'；
从“/User”导入{User}；
@可注射（）
导出类用户服务{
//返回此JSON数据：
//[{“名字”：“简”}，{“名字”：“约翰”}]
专用URL=http://users.org';
构造函数（私有http:http）{}
getUsers（）：可观察{
返回this.http.get（this.URL）
.map（（response:response）=>response.json（））
.catch（（error:any）=>Observable.throw（error.json（）.error | |“服务器错误”）；
}
}

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

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

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

从'@angular/core'导入{Component，OnInit}；
从'@angular/Router'导入{Router}；
从“/User”导入{User}；
从“/user.service”导入{UserService}；
@组成部分({
moduleId:module.id，
选择器：“用户列表”，
模板：`
{{user.firstName}
`
})
导出类UserComponent实现OnInit{
用户：用户[]；
title='列表用户'；
构造函数（私有用户服务：用户服务）{}
getUsers（）：void{
this.userService.getUsers（）
.订阅(
用户=>{
this.users=用户；
console.log（'this.users='+this.users）；
log（'this.users.length='+this.users.length）；
console.log（'this.users[0].firstName='+this.users[0].firstName）；
}，//绑定到视图
错误=>{
//记录错误（如果有）
控制台日志（err）；
})
}
ngOnInit（）：void{
这是getUsers（）；
}
}

查看您的代码：

 getUsers(): Observable<User[]> {
        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

抓住另一个链接：使用RxJs可观察对象再次构建您的服务。
您的观点是正确的。考虑添加工作示例。可以在英雄教程中使用工作示例。它很好用。谢谢jmachnik。我用附加信息更新了我的问题。我的代码之所以看起来如此，是因为我最初实现了它，正如heroes教程中所述，但在组件中我的用户[]变得“未定义”，所以我尝试了其他方法。代码现在看起来像英雄教程，但我仍然没有定义。有什么线索吗？jmachnik，它正在工作。我很高兴你引用了“可观察”教程而不是“承诺”教程，因为我知道前者是我应该使用的（几乎取代了承诺）。jmachnik，它现在正在工作。我很高兴你引用了一个“可观察的”教程，而不是一个“承诺”教程，因为我知道前者是我应该使用的（几乎取代了承诺）。起初，这对我来说仍然不起作用。我相信我有两个问题：1）我的模板有一个错误。我只是通过删除HTML文件并将HTML直接放在组件的templateUrl字段中，并显然修复了一个未知问题，才发现了这一点。2）记录返回的值。