Ionic 2 如何将 JSON 绑定到 html 页面组件答案

【问题标题】：Ionic 2 how to bind JSON to html page componentsIonic 2 如何将 JSON 绑定到 html 页面组件
【发布时间】：2017-06-18 10:37:11
【问题描述】：

我有这个 JSON

{   

  "_index": "search_posts",   "_type": "posts",   "_id": "12345", 
  "_score": 0,   
  "_source": {
      "alias_id": 0,
      "user_id": 1,
      "name": "demo",
      "email": "demo@account.com",
      } 
}

我在 page.ts 中以这种方式获取 JSON：

this.userDetails = this.navParams.get('params');

当我尝试在 page.html 中执行类似的操作以获取数据时，它会引发错误

<p id=userName>{{userDetails._source.name}}</p>

TypeError：无法读取未定义的属性“_source”

【问题讨论】：

当我尝试访问 userDetails._source 时导致错误，其中 _source 指的是我的 json。

标签： javascript angular typescript ionic2 ionic3

【解决方案1】：

问题是您在初始化之前尝试访问该对象的属性（也许视图正在尝试显示它，但组件代码尚未初始化它）。尝试这样做，但这次使用 elvis 运算符

<p id="userName">{{ userDetails?._source.name }}</p>

这样，如果 userDetails 为 null（或未定义），则 angular 不会尝试访问其属性。

【讨论】：