javascript - Angular2 显示数据

Question

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

我的 Angular 服务

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)
            })
    })

  }

我的 View 代码示例

<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

Answer 1

这是因为 Angular 正在尝试显示 entreprise 的属性，但它还没有收到该对象。

有两种可能的解决方案:

1. 使用*ngIf="entreprise"里面<div> ，仅在 entreprise 时显示内容不是null 。里面<div>那么你就可以安全地访问它的所有属性(id、name...)。根据您的示例，它将是:

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

2. 使用安全导航运算符(也称为Elvis运算符)，它由符号?表示。这将阻止 Angular 2 渲染属性，直到 entreprise != undefined 。要使用它，按照您的示例，它将是:

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

希望对你有帮助!