javascript - 在单个结果页面上显示 JSON 索引时出错

Question

这是 JSON 响应。

{
    "listing": {
        "id": "1",
        "name": "Institute Name",
        "contact": "9876543210",
        "website": "http://www.domain.in",
        "email": "hello@domain.in",
        "about": "Technical institute",
        "products": "PHP, Web, Mobile",
        "category_id": "3",
        "user_id": "31",
        "address": "201,Mumbai, Maharashtra 400051",
        "created_at": "2018-02-01 17:18:44",
        "updated_at": "2018-04-11 16:28:00",
        "listingIcon": "http://res.cloudinary.com/dptwdk7ky/image/upload/v1522756229/test-tube_cfqfmm.png",
        "icon": null
    }
}

我的 HTML 代码

<ion-content padding>
<ion-card>
  <ion-card-header>
    {{listing.about}}
  </ion-card-header>
  <ion-card-content>
    The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
  </ion-card-content>
</ion-card>
</ion-content>

调用api的代码

 getListingDetail(id){

    this.authService.postData("id="+id,"list/view").then((result) => {

    this.resposeData = result;
    //console.log(this.resposeData);
    this.listing = this.resposeData.listing;


        //this.listings = this.resposeData.data.list.data;

        console.log(this.listing);
        // localStorage.setItem('userData', JSON.stringify(this.resposeData) )
        // this.navCtrl.push(Login);


})
 }

出现上述错误..请帮忙。谢谢。

Answer 1

由于异步 HTTP 调用的性质，列表最初是未定义的。

将您的模板更改为以下内容:

{{listing?.about}}

这被称为安全导航运算符，如果列表为空/未定义，则不会失败。您可以在这里阅读更多相关信息:https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths