从角度服务获取对象数组

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

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

[
{
“名字”:“简”,
“姓氏”:“能源部”
},
{
“名字”:“约翰”,
“姓氏”:“能源部”
}
]

user.ts

导出类用户{
名字:字符串;
lastName:string;
}

用户服务

。。。
@注射的
导出类用户服务{
私人用户:用户[]=[
{
名字:“简”,
姓:“Doe”
},
{
名字:“约翰”,
姓:“Doe”
}
];
构造函数(私有http:http){}
getUsersMock():用户[]{
将此文件返回给用户;
}
getUsers():可观察的<用户[]&gt{
返回可观察的。创建(观察者=&gt{
this.http.get('http://users.org.map(response=>response.json();
})
}
...

user.component.ts

。。。
导出类UserComponent实现OnInit{
用户:用户[]={};
构造函数(私有用户服务:用户服务){}
ngOnInit():void{
这是getUsers();
//这是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

。。。
<选择disabled=“disabled”name=“Users”size=“20”>
<option*ngFor=“让用户中的用户”gt;
{{user.firstName},{{user.lastName}
</option>
</select>
...

!!!更新

我一直在阅读“英雄”教程,但不适合我,所以我开始尝试其他东西。我按照英雄教程描述的方式重新实现了我的代码。但是,当我记录this.users的值时,它报告未定义

这是我修改过的user-service.ts

。。。
@注射的
导出类用户服务{
私人用户:用户[]=[
{
名字:“简”,
姓:“Doe”
},
{
名字:“约翰”,
姓:“Doe”
}
];
构造函数(私有http:http){}
getUsersMock():用户[]{
将此文件返回给用户;
}
getUsers():承诺<用户[]&gt{
返回此.http.get('http://users.org')
.toPromise()
.then(response=>response.json().data作为用户[])
.接住(这个.把手错误);
}
...

这是我修改过的user.component.ts

。。。
导出类UserComponent实现OnInit{
用户:用户[]={};
构造函数(私有用户服务:用户服务){}
ngOnInit():void{
这是getUsers();
//这是getUsersMock();
}
getUsers():void{
this.userService.getUsers()
.then(users=>this.users=users);
console.log('this.users='+this.users);//未定义日志
}
getUsersMock():void{
this.users=this.userService.getUsersMock();
}
}
...

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

user.ts

导出类用户{
public firstName:string;
}

user.service.ts

从'@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():可观察的<用户[]&gt{
返回this.http.get(this.URL)
.map((response:response)=>response.json())
.catch((error:any)=>Observable.throw(error.json().error | |“服务器错误”);
}
}

user.component.ts

从'@angular/core'导入{Component,OnInit};
从'@angular/Router'导入{Router};
从“/User”导入{User};
从“/user.service”导入{UserService};
@组成部分({
moduleId:module.id,
选择器:“用户列表”,
模板:`
<选择size=“5”>
<option*ngFor=“let user of users”>{{user.firstName}}</option>
</select>
`
})
导出类UserComponent实现OnInit{
用户:用户[];
title='列表用户';
构造函数(私有用户服务:用户服务){}
getUsers():void{
this.userService.getUsers()
.订阅(
用户=&gt{
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);
},//绑定到视图
错误=&gt{
//记录错误(如果有)
控制台日志(err);
})
}
ngOnInit():void{
这是getUsers();
}
}

看看你的代码:

getUsers():可观察的<用户[]&gt{
返回可观察的。创建(观察者=&gt{
this.http.get('http://users.org.map(response=>response.json();
})
}

和代码来自https://angular.io/docs/ts/latest/tutorial/toh-pt6.html
(顺便说一句,非常好的教程,你应该看看)

getHeroes():承诺<英雄[]&gt{
返回this.http.get(this.heroesUrl)
.toPromise()
.then(response=>response.json().数据为Hero[])
.接住(这个.把手错误);
}

Angular2中的HttpService已经返回了一个可观察到的,所以不需要像这里那样包装另一个可观察到的:

返回可观察的。创建(观察者=&gt{
this.http.get('http://users.org.map(response=>response.json()

试着按照我提供的链接中的指南去做。当你仔细研究它的时候,你应该会没事的

—编辑—-

首先,您将this.users变量记录在何处?JavaScript不是这样工作的。您的变量未定义,由于代码的执行顺序,它很好

试着这样做:

getUsers():void{
this.userService.getUsers()
。然后(用户=&gt{
this.users=用户
console.log('this.users='+this.users);
});
}

查看console.log(…)的位置!

尝试辞去toPromise()的职务似乎只适合没有RxJs背景的ppl

捕捉另一个链接:https://scotch.io/tutorials/angular-2-http-requests-with-observables 使用RxJs可观察对象再次构建您的服务

发表评论