我正在尝试从Angular服务hero.service.ts获取json数据。当在MemoryDataService中使用伪造的HTTP API时,一切正常,我从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); } }
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" }] }
浏览器错误:
浏览器错误
任何帮助,将不胜感激。谢谢!
找到了 !这是由于InMemoryBackendService,并InMemoryDataService在使用 main.ts 文件,这似乎是“重定向”从http.get调用方法。注释main.ts文件中的这些行可解决此问题:
InMemoryBackendService
InMemoryDataService
// 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 */ ]);