Angular 5：如何用模板语法访问JSON对象的STAT与PPRP

嘿，我来帮你搞定这个Angular模板访问JSON数据的问题！你的组件代码已经把API返回的数据存到rawOverview变量里了，接下来在模板里用点语法就能直接访问嵌套的STAT和PPRP对象啦～不过要注意一个关键细节：数据是异步加载的，模板渲染时rawOverview可能还没被赋值，直接访问会触发报错，所以得加上空值保护。

模板里的正确写法示例 #

方法1：使用安全导航操作符 ?.（推荐） #

这个操作符会在rawOverview为空的时候停止链式访问，完美避免空值报错：

<!-- 展示STAT模块的数据 -->
<div class="stat-section">
  <h3>STAT 统计</h3>
  <p>总数值: {{ rawOverview?.STAT?.Total }}</p>
  <p>平均值: {{ rawOverview?.STAT?.Average }}</p>
</div>

<!-- 展示PPRP模块的数据 -->
<div class="pprp-section">
  <h3>PPRP 统计</h3>
  <p>总数值: {{ rawOverview?.PPRP?.Total }}</p>
  <p>平均值: {{ rawOverview?.PPRP?.Average }}</p>
</div>

方法2：使用*ngIf先判断数据是否存在 #

如果需要在数据完全加载后再渲染整个统计区块，可以用*ngIf做前置判断：

<!-- 只有当rawOverview存在时，才渲染下面的内容 -->
<div *ngIf="rawOverview" class="data-container">
  <div class="stat-section">
    <h3>STAT 统计</h3>
    <p>总数值: {{ rawOverview.STAT.Total }}</p>
    <p>平均值: {{ rawOverview.STAT.Average }}</p>
  </div>

  <div class="pprp-section">
    <h3>PPRP 统计</h3>
    <p>总数值: {{ rawOverview.PPRP.Total }}</p>
    <p>平均值: {{ rawOverview.PPRP.Average }}</p>
  </div>
</div>

额外小优化提示 #

你组件里的JSON.parse(JSON.stringify(data))其实有点多余哦～Angular的HTTP客户端默认会自动把API返回的JSON响应解析成JavaScript对象，你直接写this.rawOverview = data就可以了，不用额外做序列化再反序列化的操作😉

内容的提问来源于stack exchange，提问作者Thomas Geulen