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

这是'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};
  }
}

这是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

很有可能，您在JobService.getJob()解决之前使用Promise的结果。

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

Answer 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';

Answer 3

将jobUrl更改为'app / job-page / job'或者它可能只是'app / job'我不记得模拟后端如何查找数据 - 虽然我很确定后者......'app / job'

Angular 2 EXCEPTION：TypeError：无法读取未定义的属性“0”

3 个答案: