Angular 2 例外：TypeError：无法读取未定义的属性“0”答案

【问题标题】：Angular 2 EXCEPTION: TypeError: Cannot read property '0' of undefinedAngular 2 例外：TypeError：无法读取未定义的属性“0”
【发布时间】：2016-07-26 23:34:11
【问题描述】：

我只是按照使用 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);
    }
}

这是文件'app/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};
  }
}

这是控制台日志：

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)

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

【问题讨论】：

模板job-page.html的内容是什么？

标签： angular angular2-template angular2-services

【解决方案1】：

很可能，您正在使用JobService.getJob() 的结果，而Promise 尚未解决。

您的问题中缺少模板的代码，但我猜，您访问的是模板中不存在的元素

【讨论】：

我已经检查过我使用 {{job?.title}} 来避免在解决 Promise 之前使用该变量。还是找不到问题出在哪里：（

【解决方案2】：

....
@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

期望 URI 模式格式为 :base/:collectionName/:id？

尝试修改你的网址为

private jobUrl = 'api/job';

【讨论】：

@gogopower 你能把这个问题标记为解决方案吗？

【解决方案3】：

将 jobUrl 更改为 'app/job-page/job' 或者它可能只是 'app/job' 我不记得模拟后端是如何查找数据的 - 虽然我相当确定后者...“应用程序/作业”

【讨论】：