AngularJS 2：从 json 文件中获取数据不起作用

Question

我正在尝试从 Angular 服务 hero.service.ts 获取 json 数据。当使用伪造的 http API inMemoryDataService 时，一切正常，我从 in-memory-data.service.ts 文件中获取 json 数据。但是当我尝试从真实的 json 文件中获取数据时，它不起作用，并且我在浏览器中收到错误“找不到集合”。

这是文件内容（所有 3 个文件都位于 app/ 文件夹中）：

hero.service.ts :

import { Injectable } from '@angular/core';
import { Headers, Http , Response} from '@angular/http';

import 'rxjs/add/operator/toPromise';

import { Hero } from './hero';

@Injectable()
export class HeroService {

    private heroesUrl = 'app/fakeListOfHeroes';  // URL to web api
    //private heroesUrl = 'app/heroes.json'; // URL to JSON file

    constructor(private http: Http) { }

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

    private handleError(error: any)
    {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }
}

hero.service.ts :

    export class InMemoryDataService {
      createDb() {
        let fakeListOfHeroes = [
        {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'}
        ];
        return {fakeListOfHeroes};
      }
  }

heroes.json :

    {
        "data": [{
            "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"
        }]
    }

浏览器出错：

error in browser

任何帮助将不胜感激。谢谢！

Answer 1

找到了！这是由于 ma​​in.ts 文件中使用的InMemoryBackendService 和InMemoryDataService 似乎“重定向”了来自 ​​http.get 方法的调用。从 main.ts 文件中评论这些行解决了这个问题：

    // Imports for loading & configuring the in-memory web api
    import { XHRBackend } from '@angular/http';

    //import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
    //import { InMemoryDataService }               from './in-memory-data.service';

    // The usual bootstrapping imports
    import { bootstrap }      from '@angular/platform-browser-dynamic';
    import { HTTP_PROVIDERS } from '@angular/http';

    import { AppComponent }         from './app.component';
    import { appRouterProviders }   from './app.routes';

    bootstrap(AppComponent, [
        appRouterProviders,
        HTTP_PROVIDERS
        /*,
        { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
        { provide: SEED_DATA, useClass: InMemoryDataService }      // in-mem server data
        */
    ]);