AngularJS 2：从json文件获取数据不起作用 [英] AngularJS 2 : Getting data from json file not working

问题描述

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

I am trying to get the json data from an Angular service hero.service.ts. When using the fake http API inMemoryDataService, everything works fine and I am getting the json data from the in-memory-data.service.ts file. But when I try to get the data from a real json file, it does not work and I am getting an error 'collection not found' in the browser.

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

Here are the files contents (all 3 files are located in the app/ folder):

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"
        }]
    }

浏览器出错：

浏览器错误

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

Any help would be appreciated. Thanks!

推荐答案

找到它！这是由于 main.ts 文件中使用的 InMemoryBackendService 和 InMemoryDataService ，从http.get方法'重定向'调用。从main.ts文件中注释这些行解决了这个问题：

Found it ! It was due to the InMemoryBackendService and InMemoryDataService used in main.ts file, that seem to 'redirect' the calls from http.get method. Commenting those lines from main.ts file resolved the issue :

    // 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
        */
    ]);

这篇关于AngularJS 2：从json文件获取数据不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！