Angular 5: доступ к объекту JSON с использованием синтаксиса шаблона

Question

Я получаю следующее представление JSON из веб-службы

{
   "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>

но я получаю сообщение об ошибке в консоли.

ОШИБКА TypeError: Невозможно прочитать свойство 'PPRP' из неопределенного

Можно ли получить доступ к объекту JSON таким образом? Или я должен создавать известные объекты, которые могут получить доступ к значениям?

Answer 1

В настоящий момент, поскольку rawOverview установлен асинхронно, он запускает жизнь undefined, которая вызывает вашу ошибку.

Если вы переместите знак вопроса, он выполнит нулевую безопасную проверку, которая предотвратит ошибку

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

Подробнее об этом здесь

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>