从Angular服务获取对象数组

Question

我是Angular（以及Javascript）的新手。我已经编写了一个返回一组用户的Angular服务。数据是从HTTP调用中获取的，该调用以JSON格式返回数据。当记录从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的代码 （顺便说一句，真的很好的教程，你应该看看）

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

内Angular2的HttpService的已返回一个可观察的，是你一个人在这里SOU不需要包装其他可观察周围：

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再次构建您的服务。