Lấy dữ liệu từ JSON với Angular2 Promise

Question

Tôi đang cố gắng để lấy dữ liệu từ một tập tin JSON sau http tutorial từ tài liệu Angular2:

dịch vụ:

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

Component:

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

Mô hình:

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

tôi thay private heroesUrl = 'app/heroes'; với thiết bị đầu cuối của tôi đó là một tập tin JSON (private heroesUrl = 'app/mockups/heroes.json';), có chứa dữ liệu theo mô hình hero.

Nhưng khi tôi chạy ứng dụng, tôi không nhận được dữ liệu và có bất kỳ thông báo lỗi nào. Mã của tôi có đúng không?

Answer 1

Giải pháp là đối tượng JSON phải bắt đầu bằng thuộc tính có cùng tên là response.json().data.

Đổi tên thuộc tính đầu tiên thành data thực hiện công việc.