Angular 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) 

我认为我的代码是正确的。我按照教程一步一步。只是不知道我的代码有什么问题。

Answer 1

很可能，在Promise已解决之前，您正在使用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?

尝试修改您的网址为

private jobUrl = 'api/job';