Angular.io教程HeroService负荷InMemoryDataService

没有数据，我下面的教程角步骤7 here Angular.io教程HeroService负荷InMemoryDataService

我HeroService调用getHeroes()返回时，没有英雄。但我认为它应该返回in-memory-data.service.ts中定义的模拟数据。应该如何纠正它？

我没有找到解决方案，

试图改变heroesUrl到app/heroes
试图通过npm install angular-in-memory-web-api --save重装angular-in-memory-web-api（当前安装的版本"angular-in-memory-web-api": "^0.5.0"）

我的代码如下：
app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule} from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppRoutingModule } from './app-routing.module'; 

// Imports for loading & configuring the in-memory web api 
import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; 
import { InMemoryDataService } from './in-memory-data.service'; 

import { AppComponent } from './app.component'; 
import { HeroDetailComponent} from './hero-detail.component'; 
import { HeroesComponent } from './heroes.component'; 
import { DashboardComponent } from './dashboard.component'; 
import { HeroService } from './hero.service'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HeroDetailComponent, 
    HeroesComponent, 
    DashboardComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    InMemoryWebApiModule.forRoot(InMemoryDataService), 
    AppRoutingModule 
    ], 
    providers: [HeroService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

内存，data.service.ts

import { InMemoryDbService } from 'angular-in-memory-web-api'; 
export class InMemoryDataService implements InMemoryDbService { 
    createDb() { 
    const heroes = [ 
     { id: 0, name: 'Zero' }, 
     { 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 {heroes}; 
    } 
}

hero.service.ts

import { Injectable } from '@angular/core'; 
import { Headers, Http } from '@angular/http'; 
import { Hero } from './hero'; 

import 'rxjs/add/operator/toPromise'; 

@Injectable() 
export class HeroService { 
    private heroesUrl = 'api/heroes'; 

    constructor(private http: Http) {} 
    getHeroes(): Promise<Hero[]> { 
     console.log('in getheroes'); 
     return this.http.get(this.heroesUrl) 
        .toPromise() 
        .then(response => response.json().data as Hero[]) 
        .catch(this.handleError); 
    } 

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

    getHero(id: number): Promise<Hero> { 
     return this.getHeroes().then(heroes => heroes.find(hero => hero.id === id)); 
    } 
}

更新：
问题根据@federico scamuzzi的建议解决。
更改.then(response => response.json().data as Hero[])至.then(response => response.json() as Hero[])修复它。

来源

2017-10-17 vancexu

显示你的代码。 –

@federicoscamuzzi感谢您的快速响应，抱歉，编辑器在我试图将我的代码作为图片上传时，打扰了我很多，所以最终更改为文本格式。但是代码屏幕截图仍然可以在这里找到：[2]：https：//i.stack.imgur.com/uMleS.png [3]：https：//i.stack.imgur.com/P0HY0.png [4] ：https://i.stack.imgur.com/qGN8l.png – vancexu

嗨..你有没有尝试不使用.data？例如.then（response => response.json（）as Hero []）或您使用的是哪个版本的Angular？在最新版本中，http提供程序在Httpclient –

您是否尝试过don't use .data？ ..所以例如：

.then(response => response.json() as Hero[])

PS - >被仔细的角的wihich版本您使用的...在最新版本的HTTP提供在HttpClient的改变

来源

2017-10-18 09:40:24

Angular.io教程HeroService负荷InMemoryDataService

回答

相关问题