Angular2約束

Question

とJSONからデータを取得し、私はAngular2ドキュメントからhttp tutorial次JSONファイルからデータを取得しようとしている：

サービス：

import { Injectable } from '@angular/core'; 
import { Headers, Http } from '@angular/http'; 
import 'rxjs/add/operator/toPromise'; 
import { Hero } from './hero'; 

private heroesUrl = 'app/heroes'; // URL to web api 

constructor(private http: Http) { } 

getHeroes(): Promise<Hero[]> { 
    return this.http.get(this.heroesUrl) 
     .toPromise() 
     .then(response => response.json().data as Hero[]) 
     .catch(this.handleError); 
} 

はコンポーネント：

を

import { Component, OnInit } from '@angular/core'; 
import { Hero } from './hero'; 
import { HeroService } from './hero.service'; 

@Component({ 
    selector: 'my-app', 
    template: // some template, 
    styles: // some style, 
    providers: [HeroService] 
}) 

export class AppComponent implements OnInit { 
    title = 'Tour of Heroes'; 
    heroes: Hero[]; 

    constructor(private heroService: HeroService) { } 

    getHeroes(): void { 
    this.heroService.getHeroes().then(heroes => { 
     this.heroes = heroes; 
     console.log('heroes', this.heroes); 
    }); 
    } 

    ngOnInit(): void { 
    this.getHeroes(); 
    } 
} 

export class Hero { 
    constructor(
    public id: number, 
    public name: string, 
    public power: string, 
    public alterEgo?: string 
) { } 
} 

私はheroモデルに従ってデータが含まれているJSONファイル（private heroesUrl = 'app/mockups/heroes.json';）、である私のエンドポイントとprivate heroesUrl = 'app/heroes';を置き換えます。

しかし、私は私のアプリを実行すると私はデータを取得し、エラーメッセージがあります。 コードが正しくありませんか？

Answer 1

解決策は、JSONオブジェクトが同じ名前のresponse.json().dataを持つプロパティで開始する必要があるということです。

最初のプロパティの名前をdataに変更すると、ジョブが実行されます。