Angular模板*ngIf已判断node为null仍报错读取data属性如何解决

错误原因 #

你现有写法仅校验了node本身非空，但未校验node.parent是否为null，报错实际是访问node.parent.data时触发，而非node.data的问题。

解决方案 #

方案1：使用可选链操作符（推荐，Angular 12+ 原生支持） #

模板中直接使用可选链，遇到空值自动终止表达式执行，不会抛出错误：

<div class="icon-action"
     *ngIf="node?.data?.name && !node?.parent?.data?.virtual"
     (click)="delete(node)">
     <img src="./assets/img/cross.png">
</div>

方案2：补充空值判断（适配低版本Angular） #

手动补充node.parent的非空校验：

<div class="icon-action"
     *ngIf="node != null && node.data && node.data.name && node.parent != null && !node.parent.data.virtual"
     (click)="delete(node)">
     <img src="./assets/img/cross.png">
</div>

方案3：逻辑抽离到组件类（易维护、易调试） #

把校验逻辑放到组件ts文件中，模板仅调用方法即可：
组件ts代码：

// 替换any为你node的实际类型
showDeleteIcon(node: any): boolean {
  return !!node?.data?.name && !!node?.parent?.data && !node.parent.data.virtual;
}

模板代码：

<div class="icon-action"
     *ngIf="showDeleteIcon(node)"
     (click)="delete(node)">
     <img src="./assets/img/cross.png">
</div>

内容的提问来源于stack exchange，提问作者The Outstanding Question Asker