Angular模板中带空值检查的TS表达式报可能为undefined错误

根本原因 #

你遇到的差异来源于Angular 严格模板类型检查（strictTemplates）和 TypeScript 原生类型检查的推断逻辑差异：

• 首先，myArray?.length 这个可选链表达式的理论类型是 number | undefined：如果 myArray 为 undefined 时，整个表达式的返回值就是 undefined。
• 在组件TS文件中，TypeScript 编译器会深入分析 getter 方法的实现逻辑，能明确推断出你定义的 myArray getter 永远返回数组，不可能为 undefined，因此会自动把 myArray?.length 的类型收窄为 number，和数字2做比较时不会触发空值错误。
• 你在 tsconfig 中开启了 strictTemplates: true，Angular 的模板类型检查器不会深入分析组件类内部方法的实现逻辑，只会基于属性的类型声明做静态检查，它只会识别到 myArray?.length 有可能为 undefined，拿 undefined 和数字做大小比较就会抛出空值错误。

修复方案 #

你可以任选以下一种方式解决：

1. 去掉可选链（你的 getter 永远返回非空数组，不需要用 ?. 做非空判断）：

<div *ngIf="myArray.length > 2">
  array has more than 2 items
</div>

2. 给表达式加非空断言，明确告诉模板检查器这个值一定存在：

<div *ngIf="myArray?.length! > 2">
  array has more than 2 items
</div>

3. 把判断逻辑封装到组件类的属性/方法里，模板直接调用：

// 组件TS文件
get isArrayLongerThanTwo(): boolean {
  return this.myArray.length > 2;
}

<div *ngIf="isArrayLongerThanTwo">
  array has more than 2 items
</div>

4. 用空值合并运算符给可选链结果加兜底默认值：

<div *ngIf="(myArray?.length ?? 0) > 2">
  array has more than 2 items
</div>

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