2016-12-07 9 views
6

私はヒーローのツアーのようなサンプルアプリケーションを試しました。URLにnullが見つかりません:null

hero.service.ts

import {Injectable} from '@angular/core'; 
import {HttpModule, Headers, Http} from '@angular/http'; 
import 'rxjs/add/operator/toPromise'; 

import {Hero} from './hero'; 

@Injectable() 
export class HeroService { 

    private heroesUrl = 'app/heroes'; 

    constructor(private http : Http) { } 

    // working code 
    //getHeroes(): Promise<Hero[]> { 
    // return Promise.resolve(HEROS); 
    //} 

    getHeroes(): Promise<Hero[]> { 
     debugger; 
     return this.http.get(this.heroesUrl).toPromise().then(responce => responce.json().data as Hero[]).catch(this.handleError); 

    } 
    private handleError(error: any): Promise<any> { 
     console.error('An error occurred', error); // for demo purposes only 
     return Promise.reject(error.message || error); 
    } 
} 
のインメモリ・data.service.ts

以下のようなHTTP GETに校正サービスを変換する(InMemoryDbServiceを)しようとしています
import {InMemoryDbService} from 'angular-in-memory-web-api'; 

    export class InMemoryDataService implements InMemoryDbService { 
    createDb() { 
     let heroes = [ 
      { id: 1, name: 'Thulasi' }, 
      { id: 2, name: 'Bala' }, 
      { id: 3, name: 'Thulasi' }, 
      { id: 4, name: 'Thulasi' }, 
      { id: 5, name: 'Thulasi' }, 
      { id: 6, name: 'Thulasi' }, 
      { id: 7, name: 'Thulasi' }, 
      { id: 8, name: 'Thulasi' }, 
      { id: 9, name: 'Thulasi' }, 
      { id: 10, name: 'Thulasi' }, 
      { id: 11, name: 'Thulasi' } 
     ]; 
     return heroes; 
    } 
} 

以下のエラーをスローします。

私が見
hero-service.ts:25 An error occurred Response_body: Object 
    headers: Header 
    sok: false 
    status: 404 
    statusText: "Not Found" 
    type: null 
    url: null 
    __proto__: Body 
HeroService.handleError @ hero-service.ts:25 
    ZoneDelegate.invoke @ zone.js:232 
    onInvoke @ core.umd.js:5975 
    ZoneDelegate.invoke @ zone.js:231 
    Zone.run @ zone.js:114 
    (anonymous function) @ zone.js:502 
    ZoneDelegate.invokeTask @ zone.js:265 
    onInvokeTask @ core.umd.js:5966 
    ZoneDelegate.invokeTask @ zone.js:264 
    Zone.runTask @ zone.js:154 
    drainMicroTaskQueue @ zone.js:401 
    ZoneTask.invoke @ zone.js:339 
    core.umd.js:2837 EXCEPTION: Uncaught (in promise): Response with status: 404 Not Found for URL: null 
+0

アクセスしているURLが存在しないようです。ブラウザのdevtoolsでエラーメッセージが表示されているか、リクエストに正確なURLが使用されているかどうか、このURLが有効かどうかを確認しましたか? –

+0

あなたのURLは「null」です(エラーメッセージに従って)。これが本当に問題なのかどうかをデバッグして確認できますか? – Dinistro

答えて

4

一つのことは、あなたのcreateDb()は、元のようには見えませんが、..です

それは、 "コレクション" 内のオブジェクトを返します。..

return {heroes};

私はlibに推測これらのURLを構築するために、このオブジェクトが必要..

ドキュメント:https://github.com/angular/in-memory-web-api

ヒーローツアー:https://angular.io/docs/ts/latest/guide/server-communication.html#!#appendix-tour-of-heroes-in-memory-server

+0

この場合のヒーローオブジェクトの意味は{}構文の意味ですか(これはtypescriptの新機能です)?あなたのコメントをありがとう。私は英雄のオブジェクトを返すようにしていました。 –

+0

'return {heroes};'は 'return {heroes:heroes};になります。 '英雄 'という名前のプロパティを持つオブジェクトです。 – mxii

関連する問題