Angular 2：无法获取路由器参数来使用服务

Question

我正在使用Angular 2构建网站。我有一个详细信息页面，我通过在网址（http://localhost:3000/#/projectdetail/1）中传递ID来访问它。我尝试访问服务以通过我传递的id获取正确的项目。此项目保存在项目变量中，但该变量实际上始终未定义。

这是我进入详细信息页面时遇到的错误：

这是我使用的代码片段（如果您需要更多代码，请询问）：

projectdetail.page.html：

<div class="container-fluid">
    <h1>{{project.name}}</h1>
    <div>{{project.description}}</div>
</div>

projectdetail.page.ts：

public project: Project;

constructor(private projectsService: ProjectsService, private route: ActivatedRoute) {
    for (let i = 0; i < 4; i++) {
        this.addSlide();
    }
}

ngOnInit() {
    this.route.params.map(params => params['id']).subscribe((id) => {
        this.projectsService.getProject(id).then(project => this.project = project);
    });
}

projects.service.ts：

getProject(id: number): Promise<Project> {
    return this.http.get(this.url).toPromise().then(x => x.json().data.filter(project => project.id === id)[0]).catch(this.handleError);
}

Answer 1

您获得的错误来自模板。 在模板渲染时，project尚不可用。

尝试将其包装在* ngIf中以避免这种情况。

<div class="container-fluid" *ngIf="project">
    <h1>{{project.name}}</h1>
    <div>{{project.description}}</div>
</div>

Answer 2

在获取数据之前正在进行模板渲染，

您需要为project属性

创建一个空对象

选项1：

   public project: Project =  new Project (); // Provided its a class.

选项2： 如果您可能无法实例化Project（是一个接口），则可以使用可空属性

  {{project.name}}  -> {{project?.name}}

希望这会有所帮助!!