Angular HTML中带空值检查的ngIf表达式报错，如何修正？

你的代码报错原因是：虽然通过可选链?.判断了listing.sales?.last30days?.units的存在性，但后续直接访问listing.sales.last30days.units时没有使用可选链，Angular的类型检查会认为sales或last30days可能为null/undefined，存在空值访问风险，因此抛出错误。

以下是几种正确的写法：

写法一：简化可选链判断 #

直接利用可选链结合大于0的判断，当可选链返回undefined时，undefined > 0会被解析为false，和你原本的逻辑一致：

*ngIf="listing.sales?.last30days?.units > 0"

写法二：使用*ngIf变量赋值（推荐） #

这种方式更清晰，同时避免重复访问属性，Angular语言服务也不会报错：

<div *ngIf="listing.sales?.last30days?.units as units && units > 0">
  <!-- 你的内容 -->
</div>

这里先通过可选链安全获取units的值并赋值给变量units，再判断变量是否大于0，逻辑明确且类型安全。

不推荐的写法：非空断言 #

如果你能100%确保listing.sales和listing.sales.last30days永远不会为null/undefined，可以用非空断言!，但这种写法存在运行时风险，不建议在不确定的场景使用：

*ngIf="listing.sales!.last30days!.units > 0"

内容的提问来源于stack exchange，提问作者Omar