angular 2从休息服务器获取数据是零长度 - 如何调试?

时间:2016-09-27 17:54:45

标签: angular

使用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的一部分。

1 个答案:

答案 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 ); });

并检查控制台中是否打印了正确的长度?