Angular异步数据渲染异常：accountData可渲染但属性无法读取

问题原因 #

初始状态下accountData是undefined，Angular首次渲染页面时：

• {{ accountData }}的插值表达式会直接输出undefined（Angular对undefined/null的插值处理不会抛出错误，只会显示空内容或者原值）
• 但{{ accountData.name }}尝试访问undefined的name属性，直接触发"cannot read properties of undefined (reading 'name')"错误

等异步请求完成，accountData被赋值为后端返回的对象，Angular触发变更检测更新页面，这时候你能看到完整的accountData对象，但首次渲染产生的报错不会因为后续页面更新消失。

解决方案 #

方案1：用*ngIf包裹依赖异步数据的元素

你已经导入了NgIf，只需给访问属性的元素添加判断：

<p>account works!</p>

<div> {{ accountData }} </div>
<div *ngIf="accountData"> {{ accountData.name }} </div>

首次渲染时accountData为undefined，*ngIf会隐藏该div；数据加载完成后，div才会渲染并显示name属性。

方案2：使用可选链操作符?.

Angular模板支持可选链语法，直接在属性访问前添加?.：

<p>account works!</p>

<div> {{ accountData }} </div>
<div> {{ accountData?.name }} </div>

?.会先检查accountData是否为null/undefined，如果是则停止访问，不会抛出错误；如果存在则正常读取name属性。

方案3：初始化accountData为空对象

在组件类中给accountData设置初始值：

accountData: any = {}; // 初始化为空对象

首次渲染时accountData是一个空对象，访问accountData.name会得到undefined，不会触发报错；当异步请求完成后，accountData会被覆盖为后端返回的完整对象。

内容的提问来源于stack exchange，提问作者Felipe Benévolo