角2のhttp getは機能しませんが、私は郵便配達員のjsonの応答を見ることができます

Question

私はバックエンドから英雄のリストを取得しようとしていますが、Sring MVC、Rest、CORS（Cross-origin-resourc共有）。

JSON応答：私は郵便配達し、ブラウザからそのURLをヒットしようとすると、

[{"id":1,"name":"Sai"},{"id":2,"name":"Ram"},{"id":11,"name":"Mr. Nice"},{"id":12,"name":"Narco"},{"id":13,"name":"Bombasto"},{"id":14,"name":"Celeritas"},{"id":15,"name":"Magneta"},{"id":16,"name":"RubberMan"},{"id":17,"name":"Dynama"},{"id":18,"name":"Dr IQ"},{"id":19,"name":"Magma"},{"id":20,"name":"Tornado"}] 

は、だから私はJSONを取り戻すのですが、私は私のフロントエンドコードで使用しているとき、その私にそれらのオブジェクトを与えていません

フロントエンドでは、角度2のフレームワークを使用しています。ここで私はどのようにコードを実装しているのですか、私にこの問題の原因を教えてください。

ヒーローサービス：

export class HeroService { 
     private heroUrl: string = "http://localhost:7001/springmvcrestfulwebservice/service/heroes/"; 
     constructor(private http:Http){ 
     } 
     getHeroes(): Promise<Hero[]>{ 
      //return Promise.resolve(HEROES); 
      return this.http.get(this.heroUrl) 
       .toPromise() 
       .then(response=>response.json().data as Hero[]) 
       .catch(this.handleError); 
     } 
    } 

HeroesComponent：

import {Component, OnInit} from '@angular/core'; 

import {HeroService} from './hero.service'; 
import {Hero} from "./Hero"; 

@Component({ 
    moduleId: module.id, 
    providers: [HeroService], 
    selector: 'heroes', 
    templateUrl: 'heroes.component.html' 
}) 

export class HeroesComponent implements OnInit{ 
    myHeroes: Hero[]; 
    constructor(private heroService: HeroService){} 

    ngOnInit(){ 
     this.getDataFromServer(); 
    } 
    getDataFromServer():void{ 
     this.heroService.getHeroes() 
      .then(
       myHeroes => this.myHeroes = myHeroes 
      ); 
    } 
} 

何もmyHeroesに現れていません。これで私を助けてください。

Answer 1

Observableを返すようにサービスを書き換えて、コンポーネントのPromiseに変換すると、getコールは[ネットワーク]タブに表示されますか？

//Hero Service 
getHeroes(): Observable<Hero[]>{ 
      return this.http.get(this.heroUrl) 
       .map(response => response.json() as Hero[]) 
       .catch(this.handleError); 
     } 

//Hero Component 
this.heroService.getHeroes() 
    .toPromise()    
    .then(
    myHeroes => this.myHeroes = myHeroes 
);