角度2 EXCEPTION：例外TypeError：プロパティを読み取ることができません「0」未定義

Question

の私は、サーバーを模擬するためにInMemoryBackendServiceを使用してのチュートリアルに従ってください。しかし、私はこのエラーがあり、理由を知らない。

は、これは '/app/job/job-page.ts'

import {Component, ViewEncapsulation} from '@angular/core'; 
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated'; 
import {JobService} from './job-service'; 
import {Job} from './model/job'; 

@Component({ 
    directives: [ 
    ROUTER_DIRECTIVES, 
    ], 
    selector: '[job-page]', 
    host: { 
    class: 'job-page app' 
    }, 
    template: require('./job-page.html'), 
    encapsulation: ViewEncapsulation.None, 
    styles: [require('./job-page.scss'), require('./login-page.scss')], 
    providers: [JobService] 
}) 

export class JobPage { 

    public job: Job; 
    constructor(private jobService: JobService){} 

    ngOnInit(){ 
    this.getJob(); 
    } 

    getJob(){ 
    this.jobService.getJob().then((job) => { 
     this.job = job; 
     console.log(job); 
    }) 
    } 
} 

これでファイル '/app/job-service.ts'

import { Injectable } from '@angular/core'; 
import { Job } from '../job-list-page/job'; 

import { Http } from '@angular/http'; 
import 'rxjs/add/operator/toPromise'; 


@Injectable() 
export class JobService{ 

    private jobUrl = './app/job-page/job'; 

    constructor(private http: Http){} 

    getJob(): Promise<Job> { 
     return this.http.get(this.jobUrl) 
         .toPromise() 
         .then((response) => response.json().data) 
         .catch(this.handleError); 
    } 

    private handleError(error: any) { 
     return Promise.reject(error.message || error); 
    } 
} 

これでファイル「アプリです/job-page/job-data.ts'

export class JobData { 
    createDb() { 
    let job = [ 
     { id: '1', name: 'Windstorm' }, 
     { id: '2', name: 'Bombasto' }, 
     { id: '3', name: 'Magneta' }, 
     { id: '4', name: 'Tornado' } 
    ]; 
    return {job}; 
    } 
} 

これはにconsole.logです：

EXCEPTION: TypeError: Cannot read property '0' of undefined 
browser_adapter.ts:78EXCEPTION: TypeError: Cannot read property '0' of undefinedBrowserDomAdapter.logError @ browser_adapter.ts:78 
browser_adapter.ts:78STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:78 
browser_adapter.ts:78TypeError: Cannot read property '0' of undefined 
    at InMemoryBackendService.parseId (http://localhost:3000/main.bundle.js:146311:37) 
    at InMemoryBackendService.handleRequest (http://localhost:3000/main.bundle.js:146137:23) 
    at InMemoryBackendService.createConnection (http://localhost:3000/main.bundle.js:146095:25) 
    at httpRequest (http://localhost:3000/main.bundle.js:78654:21) 
    at Http.get (http://localhost:3000/main.bundle.js:78703:17) 
    at JobService.getJob (http://localhost:3000/main.bundle.js:211008:27) 
    at JobPage.getJob (http://localhost:3000/main.bundle.js:210956:26) 

私のコードは正しいと思います。私はチュートリアルのステップバイステップに従います。私のコードの問題点は分かりません。 Promiseが解決された前

Answer 1

可能性が非常に高い、あなたはJobService.getJob()の結果を使用しています。

テンプレートのコードは、あなたの質問から欠落しているが、私は推測している、あなたはテンプレートに存在しない要素にアクセス

Answer 2

変更jobUrl「アプリ/ジョブページ/仕事」へのまたはそれだけかもしれません「アプリ/ジョブのモックバックエンドでデータを検索し、どのように私は正確に思い出すことができない - 私は後者... 'アプリ/ジョブの

Answer 3

.... 
@Injectable() 
    export class JobService{ 
    private jobUrl = './app/job-page/job'; 
.... 

よるにかなり確信しているもののhttps://github.com/angular/in-memory-web-api/blob/master/src/in-memory-backend.service.ts

Expect URI pattern in the form :base/:collectionName/:id?

あなたのURLを変更してみてください

private jobUrl = 'api/job';