memory-web-apiで作成されたデータベースが見つかりません

Question

Node.jsバックエンドを使用してAngular 2アプリケーションを構築しています。 angular-in-memory-web-apiを使用して、カスタムファイル内に作成されたデータベースを見つけようとしています"./in-memory-data-service,"「Promise」の代わりにObservablesを使用する点を除いて、Angular 2のTour of Heroesデモをたどりました。しかし、私はundefinedを私のコンソールに返しています。メモリ内の-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ファイルです。

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}); 
    } 
} 

この問題に関する任意の助けをいただければ幸いです。一つはundefinedを見ることができますloadComments()方法でconsole.log(this.comments)です。必要に応じて余分なコードを提供することができます。

Answer 1

は