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

我找到了解决方案，因为我在一个promise中返回项目，项目变量是未定义的，直到它被更改，这就是页面崩溃的原因。

我在调用project.name：

之前添加了以下代码以检查它是否未定义

 $('#calendar').fullCalendar({
            header: {
                left: 'prev,next ',
                center: 'title',
                right: false,
            },

    });

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

2 个答案: