使用Angular 2网站上的英雄教程。我已经设置了heroService来使用tomcat的rest服务。使用curl会产生正确的结果
C:\Temp\curl>curl http://centos7-ansible:8080/heroes/heroes
[{"id":1,"name":"Mr. Nice"},{"id":2,"name":"Narco"},{"id":3,"name":"Bombasto"},{"id":4,"name":"Celeritas"},{"id":5,"name":"Magneta"},{"id":6,"name":"RubberMan"},{"id":7,"name":"Dynama"},{"id":8,"name":"Dr IQ"},{"id":9,"name":"Magma"},{"id":10,"name":"Tornado"}]
所以在hero.service.ts中,
private heroesUrl = 'http://centos7-ansible:8080/heroes/heroes'; // URL to web api
getHeroes(): Promise<Hero[]> {
return this.http.get(this.heroesUrl)
.toPromise()
.then(response => response.json().data as Hero[])
.catch(this.handleError);
}
在通话组件中,
ngOnInit(): void {
console.log("about to get data");
this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(4, 8));
console.log("returned from getting data");
console.log(length of array is " + this.heroes.length );
}
看着我得到的控制台
about to get data
GET http://centos7-ansible:8080/heroes/heroes 200 OK 43ms
returned from getting data
length of array is 0
所以它适用于卷曲,但在Angular内则不然。
另外,查看Tomcat中的访问日志,同样的日志消息是卷曲和角度访问。
"GET /heroes/heroes HTTP/1.1" 200 273
"GET /heroes/heroes HTTP/1.1" 200 273
“273”是否返回了数据长度?哪个表明数据存在但是没有被放入Hero数组? 我的英雄是对的吗? 在控制台中,我得到了
EXCEPTION: Uncaught (in promise): TypeError: e is undefined
这是什么意思?什么是“e”? 我如何进行调试,因为控制台将代码行作为bundle.js的一部分。
答案 0 :(得分:1)
可以替换以下行
this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(4, 8));
与
this.heroService.getHeroes().then(heroes => { this.heroes = heroes.slice(4, 8); console.log(length of array is " + this.heroes.length ); });
并检查控制台中是否打印了正确的长度?