javascript - Angular2显示数据

我只是想显示一些通过服务进入我的API的信息，但是，当控制台向我显示所需信息时，我无法在视图中访问它。

我的角度服务

getById(id){

    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');

        this.http.get(this.urlRoot+'entreprise/'+id, {headers:headers})
            .subscribe(res=>{
                let data = res.json();
                resolve(data.entreprise);
            }, (err) =>{
                reject(err)
            })
    })

  }

我的查看代码示例

<div class="entreprise-name"><h1> {{ entreprise.name }} </h1></div>

错误代码

Cannot read property 'id' of undefined

API json回答

{
  "entreprise": {
    "id": 1,
    "domaine_id": 1,
    "category_id": 1,
    "name": "Culry Hairs",
    "location": "Rue du Travail 1, 7000 Mons, Belgium",
    "description": "La coupe qui décoiffe",
    "contact_person": "Marie Kristy",
    "phone_number": "065/53.46.55",
    "createdAt": "2017-03-05T23:00:00.000Z",
    "updatedAt": "2017-03-05T23:00:00.000Z"
  }
}

img of the 'console.log' of the data

最佳答案

这是因为Angular试图显示企业的属性，而尚未接收到该对象。

有两种可能的解决方案：


在*ngIf="entreprise"内使用<div>，仅在entreprise不是null时显示内容。在<div>内部，您可以安全地访问其所有属性（id，name ...）。按照您的样本，它将是：

<div class="entreprise-name" *ngIf="entreprise"><h1> {{ entreprise.name }} </h1></div>
使用安全导航运算符（也称为Elvis运算符），它由符号？表示。这将防止Angular 2将属性拖延到entreprise != undefined。要使用它，请按照您的示例进行操作：

<div class="entreprise-name"><h1> {{ entreprise?.name }} </h1></div>


希望对您有帮助！