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

回答

相關問題