javascript - Angular 2 : trying to get a project in the detail page

标签 javascript angularjs json

我正在尝试从包含项目的 json 文件中获取一个项目,但我的代码不起作用。

我收到以下错误:TypeError:无法读取未定义的属性“名称”。这是因为项目变量没有正确填写。

这是来自服务的代码。我如何从 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>

最佳答案

您可以使用*ngIf或者您可以使用safe-navigation-operator:entity?.property

根据您的具体情况:

project?.name

Link to docs

关于javascript - Angular 2 : trying to get a project in the detail page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37712223/

相关文章:

javascript - 将带有参数的函数传递给javascript中的另一个函数

javascript - 使用 jQuery 或专有 JavaScript,如何停止在 Internet Explorer 中下载文件?

javascript - 取消 $http 请求 angularjs

javascript - JSON.stringify 忽略嵌套对象

javascript - jQuery/JavaScript : webkit clearTimeout issue

javascript - 用于在树面板中显示项目的数据格式

javascript - 从动态创建的 ObjectArray 中删除一个对象

javascript - 在 AngularJS 中,是否可以强制 View 从 Controller 外部更新?

javascript - 如何使用jquery获取div的id?

json - 使用 Centos 在 perl 中将二进制数据嵌入 JSON