Question

我从Web服务

获得以下JSON represantion

{
   "STAT": {
      "Total": 216,
      "Average": 2.9722222222222223
   },
   "PPRP": {
      "Total": 31494,
      "Average": 19.884390677589384
   }
}

在我的组件中，我有以下代码：

  rawOverview: any
  ngOnInit() {
    this.service.getPlcOverview().subscribe(
    data => {
      this.rawOverview = JSON.parse(JSON.stringify(data))
    },
    err => console.error(err),
    () => console.log('done loading foods')
 );
}

如何使用模板语法访问PPRP和STAT？

我尝试了以下内容：

<table class="table table-dark">
    <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Tels with acks</th>
        </tr>
      </thead>
  <tbody>
    <tr>
      <th scope="row">PPRP</th>
      <td>{{rawOverview.PPRP?.Average}}</td>
    </tr>
  </tbody>
</table>

但我在控制台中收到错误。

错误类型错误：无法读取属性＆＃39; PPRP＆＃39;未定义的

是否可以通过这种方式访问JSON对象？或者我是否必须创建可以访问值的已知对象？

Answer 1

目前，由于rawOverview是异步设置的，因此会启动undefined生命，这会导致错误。

如果移动问号，它将执行空安全检查，这将防止错误

<td>{{rawOverview?.PPRP?.Average}}</td>

有关here

的更多信息

Answer 2

是的，您可以而且应该像这样访问它。在HTML中只需执行以下操作：

<tr>
  <th scope="row">PPRP</th>
  <td>{{rawOverview.PPRP?.Average}}</td>
</tr>
    <tr>
  <th scope="row">STAT</th>
  <td>{{rawOverview.STAT?.Average}}</td>
</tr>

Angular 5：使用模板语法访问JSON对象

2 个答案: