从Angular服务获取对象数组
我是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的值时，它报告未定义。
这是我修改后的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();
}
}
看看你的代码：
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已经返回一个可观察对象，不需要像在这里一样包装另一个可观察对象。
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再次构建您的服务。
链接地址: http://www.djcxy.com/p/93713.html上一篇: Getting an object array from an Angular service
下一篇: How can I use a custom runner when using categories in Junit?