的package.json：

{
  "name": "self-assessment","version": "1.0.0","scripts": {
    "postinstall": "npm run typings install","lite": "lite-server","gulp": "gulp","start": "concurrent \"npm run gulp\" \"npm run lite\" ","typings" : "typings"
  },"license": "ISC","dependencies": {
    "angular2": "2.0.0-beta.3","systemjs": "0.19.6","es6-promise": "^3.0.2","es6-shim": "^0.33.3","reflect-Metadata": "0.1.2","rxjs": "5.0.0-beta.0","zone.js": "0.5.11"
  },"devDependencies": {
    "autoprefixer": "^6.2.1","cssnano": "^3.4.0","concurrently": "^1.0.0","gulp": "^3.9.0","gulp-ext-replace": "^0.2.0","gulp-imagemin": "^2.4.0","gulp-postcss": "^6.0.1","gulp-sourcemaps": "^1.6.0","gulp-typescript": "^2.10.0","gulp-uglify": "^1.5.1","lite-server": "^2.0.1","postcss": "^5.0.13","postcss-scss": "^0.1.3","precss": "^1.3.0","typings":"^0.6.8","tsd": "^0.6.5-beta"
  }
}

app.component.ts：

import {Component} from 'angular2/core';
import {AssessmentListComponent} from "./assessment-list.component";
import {HomeComponent} from "./home.component";
import {ApiService} from "../services/api.service";
import {RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS} from 'angular2/router';
import {AssessmentComponent} from "./assessment.component";

@Component({
    selector: 'my-app',templateUrl: 'app/components/app.component.html',directives: [
        ROUTER_DIRECTIVES,],providers: [
        ApiService,ROUTER_PROVIDERS,]
})
@RouteConfig([
    {path: '/home',name: 'Home',component: HomeComponent,useAsDefault: true},{path: '/assessments',name: 'Assessments',component: AssessmentListComponent},{path: '/assessment/:id',name: 'Assessment',component: AssessmentComponent},])
export class AppComponent {

    title = "Welcome to Self-Assessment"

}

assessment.component.ts：

import {Component,OnInit} from 'angular2/core';
import {AssessmentModel} from '../models/assessment.model';
import {RouteParams} from 'angular2/router';
import {ApiService} from '../services/api.service';

@Component({
    selector: 'assessment-component',templateUrl: 'app/components/assessment.component.html',})
export class AssessmentComponent implements OnInit{
    assessment: AssessmentModel;
    errorMessage: any;

    constructor(
        private _apiService: ApiService,private _routeParams: RouteParams
    ) {}


    ngOnInit():any {
        let id = +this._routeParams.get('id');
        this.getAssessment(id);
    }

    private getAssessment(id: number) {
        this._apiService.getAssessment(id)
            .subscribe(
                assessment => this.assessment = assessment,error => this.errorMessage = <any>error
            );
    }

    goBack() {
        console.log(this.assessment);
    }
}

api.service.ts：

import {Injectable} from 'angular2/core';
import {Http,Response} from 'angular2/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class ApiService {
    constructor(private _http: Http) {}

    private _baseApiUrl = 'http://localhost:8000/';

    getAssessments() {
        return this.getObjectList('assessments','json');
    }

    getAssessment(id: number) {
        return this.getObject('assessments',id,'json');
    }

    getObjectList(listName:string,listExtension: string) {

        var url =  this._baseApiUrl + listName + '.' + listExtension;

        return this._http.get(url)
            .map(response => response.json())
            .catch(this.handleError);
    }

    getObject(objectName:string,objectId:number,objectExtension: string) {

        var url =  this._baseApiUrl + objectName + '/' + objectId + '.' + objectExtension;

        return this._http.get(url)
            .map(response => response.json())
            .catch(this.handleError);
    }

    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

最后
assessment.component.html：

<h3>{{ assessment.id }}</h3>
<button (click)="goBack()">Go Back 2</button>

使用url：http://localhost:3000/assessment/4调用页面时,它会对后端进行两次适当的调用,并在控制台中生成以下错误：

Uncaught EXCEPTION: TypeError: Cannot read property 'id' of undefined in [{{ assessment.id }} in AssessmentComponent@0:4]
ORIGINAL EXCEPTION: TypeError: Cannot read property 'id' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'id' of undefined
    at AbstractChangeDetector.ChangeDetector_AssessmentComponent_0.detectChangesInRecordsInternal (viewFactory_AssessmentComponent:30:28)
    at AbstractChangeDetector.detectChangesInRecords (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8116:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8099:12)
    at AbstractChangeDetector._detectChangesInViewChildren (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8184:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8103:12)
    at AbstractChangeDetector._detectChangesContentChildren (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8178:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8100:12)
    at AbstractChangeDetector._detectChangesInViewChildren (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8184:14)
    at AbstractChangeDetector.runDetectChanges (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8103:12)
    at AbstractChangeDetector.detectChanges (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:8088:12)
ERROR CONTEXT:
[object Object]ExceptionHandler.call @ angular2.dev.js:1206(anonymous function) @ angular2.dev.js:12591NgZone._notifyOnError @ angular2.dev.js:13635collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13539Zone.run @ angular2-polyfills.js:1247NgZone._notifyOnTurnDone @ angular2.dev.js:13450(anonymous function) @ angular2.dev.js:13565zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262

因此,似乎{{assessment.id}}在从后端返回对象之前尝试渲染.如果我然后单击“返回2”按钮,它将控制台适当地记录对象：

{"id":4,"title":"Assessment Title here!","description":"Here is a description","questions":["http://localhost:8000/questions/1.json","http://localhost:8000/questions/2.json","http://localhost:8000/questions/3.json","http://localhost:8000/questions/4.json","http://localhost:8000/questions/5.json","http://localhost:8000/questions/6.json","http://localhost:8000/questions/7.json","http://localhost:8000/questions/8.json","http://localhost:8000/questions/9.json","http://localhost:8000/questions/10.json","http://localhost:8000/questions/11.json","http://localhost:8000/questions/12.json","http://localhost:8000/questions/13.json"],"responses":[]}

“有趣的是”我没有在应用程序的其他地方看到问题(即可以加载和显示评估列表,等等).另外,我在昨晚作为学习项目工作的Ionic2应用程序中遇到了完全相同的问题.

用Google搜索了我的屁股,希望有人知道这个谜语的答案.

谢谢！