Угловой 2: попытка получить проект на странице подробностей

Question

Я пытаюсь получить один проект из json-файла, содержащего проекты, но мой код не работает.

Я получаю следующее сообщение об ошибке: 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> 

Answer 1

Вы можете использовать *ngIf или вы можете использовать safe-navigation-operator: entity?.property

В вашем конкретном случае:

project?.name 

Link to docs

Answer 2

Я нашел решение, потому что я вернуть проект в обещание, то переменная проекта не определена до тех пор, пока она не будет изменена, и поэтому страница выйдет из строя.

Я добавил следующий код, чтобы проверить, если он не определен, перед вызовом project.name:

*ngIf="project"