javascript - Angular 2 : Cannot get router parameter to work with service

Question

我正在使用 Angular 2 构建一个网站。我有一个详细信息页面，通过在 url (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>