json - Angular 2 : Getting data from json file not working

Question

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

以下是文件内容(所有 3 个文件都位于 app/文件夹中):

英雄.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);
    }
}

英雄.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};
      }
  }

英雄.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

找到了!这是由于 InMemoryBackendService 和 InMemoryDataService 在 ma​​in.ts 文件中使用，似乎“重定向”了来自 ​​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
        */
    ]);