角控制台异常答案

【问题标题】：Angular console exception角控制台异常
【发布时间】：2018-10-08 01:20:13
【问题描述】：

我在 Angular 6 中遇到了这个控制台异常：

_co.user.address is undefined

这是从服务接收到的 json 对象信息：

{"name":"John Doe","address":{"city":"Las Vegas"}}

这是网页代码：

<p>UserName: {{ user.name }} </p>
<p>City: {{ user.address.city }} </p>

这是用户类的ts代码：

export class UserComponent implements OnInit {
  user: Object;
  constructor(private data: DataService) { }
    ngOnInit() {
      this.data.getUser().subscribe(
        data => this.user = data
      );
    }
 }

但是，网页中的城市信息显示正确。

【问题讨论】：

你需要检查用户是否真的有数据，使用*ngIf

标签： angular

【解决方案1】：

使用 safe navigation operator(?) 处理控制台错误，因为正在异步检索数据

<p>UserName: {{ user?.name }} </p>
<p>City: {{ user?.address?.city }} </p>

如果要在模板上绑定大量变量，也可以使用 *ngIf，

<ng-template *ngIf="user">
    <p>UserName: {{ user?.name }} </p>
    <p>City: {{ user?.address?.city }} </p>
</ng-template>

【讨论】：