angular 2 erhalten Daten vom Rest Server ist Null Länge - wie zu debuggen?

Question

Verwenden des Heroes-Lernprogramms auf der Angular 2-Website. Ich habe den HeroService eingerichtet, um einen Rest-Service von Tomcat zu verwenden. curl Mit erzeugt das korrekte Ergebnis

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"}] 

So in dem 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); 
    } 

In der anrufenden Komponente,

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

an der Konsole der Suche bekomme ich

about to get data 
GET http://centos7-ansible:8080/heroes/heroes 200 OK 43ms  
returned from getting data 
length of array is 0 

So funktioniert es von Curl aber innerhalb von Angular nicht.

Mit Blick auf den Zugriffsprotokoll in Tomcat, ist die gleiche Protokollmeldung für beide Curl und eckigen Zugriff.

"GET /heroes/heroes HTTP/1.1" 200 273 
"GET /heroes/heroes HTTP/1.1" 200 273 

Ist die "273" die Länge der Daten zurückgegeben? Was würde darauf hindeuten, dass die Daten vorhanden sind, aber nicht in das Hero-Array eingefügt werden? Ist meine heldenUrl korrekt? Ich Innerhalb Konsole bekommen

EXCEPTION: Uncaught (in promise): TypeError: e is undefined 

Was bedeutet das? Was ist "e"? Wie gehe ich zum Debuggen, da die Konsole die Codezeilen als Teil einer Bundle.js gibt.

Answer 1

Können Sie die folgende Zeile

this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(4, 8)); 

mit

this.heroService.getHeroes().then(heroes => { this.heroes = heroes.slice(4, 8); console.log(length of array is " + this.heroes.length); }); 

und überprüfen ersetzen, wenn die richtige Länge jetzt in der Konsole gedruckt wird?