引用REST JSON结果变量时出现Angular HTML模板错误

Question

我第一次使用Angular 6并将一些教程代码修改为略有不同的目的。我有一个基本的REST Web服务，只返回一个记录的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}}，一切都很好并且没有错误。如果我将其保留，应用程序仍会在页面上正确打印出两次ID，但会在日志中显示错误。我怀疑它与accountDetail被声明为一个对象有关，所以它不知道它有像id等这些特定的属性，但它仍然设法打印正确的值..？任何帮助是极大的赞赏。谢谢。

Answer 1

在API响应到达之前，您的accountDetail对象没有值。通过使用？应用空检查直到响应到达：

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