Angular 2：试图在详细信息页面中获取项目

我试图从包含项目的json文件中获取一个项目，但我的代码无法正常工作。Angular 2：试图在详细信息页面中获取项目

我收到以下错误：TypeError: Cannot read property 'name' of undefined。这是因为项目变量未正确填写。

这是服务中的代码。我如何从json文件获得服务：

getProject(id: number): Promise<Project> { 
    return this.http.get(this.url).toPromise().then(x => { 
     var project: Project 
     x.json().data.forEach(element => { 
      if (element.id == id) 
      { 
       project = element; 
      } 
     }); 
     return project; 
    }).catch(this.handleError) 
} 

compareProject(projectA, projectB): number { 
    if (projectA.id > projectB.id) 
     return -1; 
    else if (projectA.id < projectB.id) 
     return 1; 
    else 
     return 0; 
}

如果我调试此代码，我实际上得到正确的项目。但它不能在HTML文件中工作。

这是网页：

import { Component, OnInit } from '@angular/core'; 
import { RouteSegment} from '@angular/router' 

import { ProjectsService } from '../services/projects.service'; 
import { Project } from '../models/project'; 

@Component({ 
    templateUrl: 'app/pages/projectdetail.page.html', 
    providers: [ProjectsService] 
}) 
export class ProjectDetail implements OnInit { 
    id: any; 
    project: Project; 

    constructor(private projectsService: ProjectsService, routeSegment: RouteSegment) { 
     this.id = routeSegment.getParam('id'); 
    } 

    getProject() { 
     this.projectsService.getProject(this.id).then(project => { 
      this.project = project 
     }); 
    } 

    ngOnInit() { 
     this.getProject(); 
    }  
}

和HTML，这是错误所在：

<div class="container-fluid"> 
    <div class="page-header headercontainer"> 
    </div> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <h1>Project: {{project.name}}</h1> 
</div>

来源

2016-06-08 kevingoos