Ошибка углового шаблона HTML при обращении к результирующей переменной REST JSON

Question

Я впервые играю с Angular 6 и модифицирую некоторый учебный код для немного другой цели. У меня есть базовый веб-сервис REST, который возвращает JSON только для одной записи, тогда как в руководстве они возвращают массив в JSON. У меня на самом деле все работает нормально с точки зрения пользователя, но я получаю сообщение об ошибке в консоли, хотя функционально это нормально.

Я получаю ошибку:

AccountDetailComponent.html:4 ERROR TypeError: Cannot read property 'id' of undefined
at Object.eval [as updateRenderer] (AccountDetailComponent.html:4)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:11087)
at checkAndUpdateView (core.js:10463)
at callViewAction (core.js:10699)
at execComponentViewsAction (core.js:10641)
at checkAndUpdateView (core.js:10464)
at callViewAction (core.js:10699)
at execEmbeddedViewsAction (core.js:10662)
at checkAndUpdateView (core.js:10459)
at callViewAction (core.js:10699)

Вот мой component.ts:

import { Component, OnInit } from '@angular/core';
import { APIService } from '../api.service';

@Component({
  selector: 'app-account-detail',
  templateUrl: './account-detail.component.html',
  styleUrls: ['./account-detail.component.css']
})
export class AccountDetailComponent implements OnInit {
  private accountDetail: object;
  private accountId: number;  // added this for testing
  constructor(private apiService: APIService) { }
  ngOnInit() {
    this.getAccountDetail();
  }
  public getAccountDetail() {
    console.log('in getAccountDetail');
    this.apiService.getAccountDetail().subscribe(data => {
      this.accountDetail = data;
      this.accountId = data.id; // added this for testing
      console.log(data.id);
      console.log(this.accountDetail.id);
      console.log('done');
    },
      err => {
        console.log('Error Occurred');
      }
      );
  }

}

И component.html:

<h1>
  Account Details
</h1>
<div>
  {{ accountId }}
  {{ accountDetail.id }}
</div>

Выход просто:

511 511

Что меняется каждый раз, когда страница обновляется, как ожидалось.

Если я удаляю {{accountDetail.id}} из уравнения, все в порядке и ошибок нет. Если я оставлю это, приложение все равно дважды правильно напечатает идентификатор на странице, но в журнале отобразится ошибка. Я подозреваю, что это как-то связано с объявлением accountDetail как объекта, поэтому он не знает, что у него есть такие специфические свойства, как id и т. Д., Но ему все же удается вывести правильное значение ..? Любая помощь очень ценится. Спасибо.

Answer 1

Ваш объект accountDetail не имеет значения, пока не придет ответ API. используя? применить нулевую проверку до получения ответа:

{{ accountDetail?.id }}

или, как вы сказали, вы можете использовать * ngIf:

<div *ngIf="accountDetail">
  {{ accountDetail.id }}
</div>

Answer 2

Ваша проблема заключается в следующем:

• Когда ваш компонент создан, accountDetail не имеет значения, он не определен .
• Когда вы выбираете некоторые данные, они становятся ASYNC. Это значит, что данные могут прийти после ngOnInit. Поэтому, когда он будет создан, ваш html не найдет accountDetail.

Что вы можете сделать?:

<h1>
  Account Details
</h1>
<div>
  {{ accountId }}
</div>
<div *ngIf="accountDetail">
  {{ accountDetail.id }}
</div>

или

<div>
  {{ accountId }}
</div>
<div>
  {{ accountDetail?accountDetail.id:'' }}
</div>