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>
答
我找到了解决办法,因为我在一个承诺回报项目时,项目变量是未定义的,直到它被更改,这就是页面崩溃的原因。
我添加以下代码以检查它是否调用project.name之前未定义:
*ngIf="project"
另一种解决方案是使用'safe-navigation-operator',请参阅下面的答案 – Dieterg