angular-in-memory-web-api 找不到创建的数据库

Question

我正在构建一个带有 Node.js 后端的 Angular 2 应用程序。我正在尝试使用angular-in-memory-web-api 在自定义文件"./in-memory-data-service," 中查找创建的数据库，这几乎遵循Angular 2 上的英雄之旅演示，除了使用Observables 而不是Promises。但是，我的控制台中不断返回undefined。

这是我的超级基础数据库：

in-memory-data.service.ts

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
      let comments = [
          {id: 1, author: "Katie", text: "Hows it going?"}
      ];
      return {comments};
  }
}

这是我的 app.module.ts 文件。我的所有自定义组件和提供程序都已声明。

/// <reference path="../node_modules/immutable/dist/immutable.d.ts" />
import { NgModule }               from "@angular/core";
import { BrowserModule }          from "@angular/platform-browser";
import { HttpModule, JsonpModule, XHRBackend } from "@angular/http";
import { FormsModule, ReactiveFormsModule }            from "@angular/forms";
import { ChartsModule }           from "ng2-charts/ng2-charts";
import { InMemoryWebApiModule, InMemoryBackendService }   from "angular-in-memory-web-api";
import { InMemoryDataService }    from "./in-memory-data.service";
// extra dependencies omitted

@NgModule({
  imports: [ 
    ...
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    ...
  ],
  declarations: [ 
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

这是我的 comment.service.ts 文件的相关部分，用于检索创建的数据库。我怀疑private commentsUrl = "app/comments" 可能是罪魁祸首，但我已将其更改为许多其他地址，结果相似。

import {Injectable} from "@angular/core";
import {Http, Response, Headers, RequestOptions, XHRBackend} from "@angular/http";
import {Observable} from "rxjs/Rx";

export class Comment {
    constructor(
        public id: number,
        public author: string,
        public text: string
    ){}
}

@Injectable()
export class CommentService {
    constructor (private http: Http) {}

    private commentsUrl = "app/comments";

    getComments(): Observable<Comment[]> {
        return this.http.get(this.commentsUrl)
            .map((res: Response) => res.json())
            .catch((error:any) => Observable.throw(error.json().error || "Server error"));
    }

}

这是从服务收集数据的comment-list.component.ts 文件。 loadComments() 方法中的console.log(this.comments) 是可以看到undefined 的地方：

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import {Comment, CommentService} from './comment.service';
import { EmitterService } from './emitter.service';

@Component({
    selector: 'comment-list',
    templateUrl: "./app/comment-list.component.html"
})

export class CommentListComponent implements OnInit, OnChanges {
    constructor(private commentService: CommentService) {}

    comments: Comment[];

    @Input() listId: string;
    @Input() editId: string;

    loadComments(){
        this.commentService.getComments()
            .subscribe(
                comments => this.comments = comments,
                err => {
                    console.log(err);
                }
            );
            console.log(this.comments);
    }
    ngOnInit(){
        this.loadComments();
    }

    ngOnChanges(changes:any){
        EmitterService.get(this.listId).subscribe((comments:Comment[]) => 
            {this.comments = comments});
    }
}

对此问题的任何帮助将不胜感激。如果需要，我可以提供额外的代码。

Answer 1

尝试在您的服务中将res.json() 更改为res.json().data