Angular.io 教程 HeroService 没有从 InMemoryDataService 加载数据

Question

我正在按照 Angular 教程进行第 7 步 here

我的HeroServicereturn调用时没有大侠getHeroes()。但我认为它应该 return 模拟 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[]) 修复了它。

Answer 1

你尝试过don't use .data吗？ ..例如：

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

P.S --> 请注意您使用的 Angular 的哪个版本...在最新版本中，Httpclient

中的 http 提供程序已更改

Angular.io 教程 HeroService 没有从 InMemoryDataService 加载数据

Angular.io tutorial HeroService load no data from InMemoryDataService

in-memory

angular