未填充Angular2可观察HTTP数据
我是Angular2的新手,希望从JSON文件加载数据。 我读了AngularIO的文章并做了教程,但我仍然需要一些帮助。 我将“获取数据”拆分为一个加载数据的apiService和一个从apiService获取数据的组件 因为它更简单,所以对于这个问题,我想直接将数据加载到组件,而不使用apiService 这是一个组件:未填充Angular2可观察HTTP数据,http,angular,request,observable,Http,Angular,Request,Observable,我是Angular2的新手,希望从JSON文件加载数据。 我读了AngularIO的文章并做了教程,但我仍然需要一些帮助。 我将“获取数据”拆分为一个加载数据的apiService和一个从apiService获取数据的组件 因为它更简单,所以对于这个问题,我想直接将数据加载到组件,而不使用apiService 这是一个组件: export class StatusComponent implements OnInit { private status = {}; private
export class StatusComponent implements OnInit {
private status = {};
private error: string;
constructor(private router: Router, private variables: Variables, private apiService: ApiService, private http: Http) {
if (!this.variables.getIsLoggedIn()) {
this.router.navigate(['login']);
}
}
ngOnInit() {
this.getStatus();
}
getStatus() {
this.http.get('../app/apiFiles/status.json')
.map((res:Response) => res.json())
.subscribe(
data => { this.status = data},
err => console.error(err),
() => console.log('done')
);
console.log(JSON.stringify(this.status));
}
}
这是JSON:
{
"status": {
"timercount": "0",
"reccount": "0"
}
}
在组件中,正确加载了getStatus()
,并且没有出现错误,但是变量i fillstatus
没有填充。
在getStatus()
之后,变量仍然是{}
。
此外,console.log(JSON.stringify(this.status))的输出代码>是{}
我希望有人能帮我解决这个问题!
非常感谢 这是因为console.log(JSON.stringify(this.status))代码>在http调用完成后执行。请记住,所有http调用都是异步方法。试试这个:
getStatus() {
this.http.get('../app/apiFiles/status.json')
.map((res:Response) => res.json())
.subscribe(
data => { this.status = data},
err => console.error(err),
() => console.log(this.status);
);
}
您将看到这将打印您的结果,因为()=>console.log(this.status)代码>在http调用成功完成后执行。正确的解决方案是:
getStatus() {
this.http.get('../app/apiFiles/status.json')
.map((res:Response) => res.json())
.subscribe(
data => { this.status = data.status},
err => console.error(err),
() => console.log('done')
);
console.log(JSON.stringify(this.status));
}
因此,您必须使用data.status
,因为JSON文件以“status”开头) 谢谢,但不是,这不是解决方案:/n解决方案是使用this.status=data.status
,然后加载数据…;)但是非常感谢你!