Angular模板中*ngIf检查变量非undefined仍触发TS2322错误如何解决？

问题原因 #

• Angular 的模板类型检查与原生 TypeScript 的类型收窄逻辑不完全一致，默认配置下，*ngIf 中对可选属性的非空判断结果，不会自动传递给内部的子节点绑定，因此即使你在外层做了非undefined校验，内部绑定的时候TS仍然认为product.info可能为undefined。
• 你写的校验逻辑存在冗余：product.info && product.info !== undefined已经隐含了非空判断，但Angular模板的静态类型检查无法识别跨节点的类型收窄规则。

解决方案 #

方案1：使用非空断言（最简单） #

直接在绑定属性后加!非空断言操作符，显式告诉TS该值肯定不为空，适合你已经确认外层做了非空校验的场景：

<div *ngIf="product.info">
  <quill-view-html [content]="product.info!"></quill-view-html>
</div>

方案2：开启ngIf类型收窄配置（Angular 14及以上版本支持） #

在项目的tsconfig.json中添加Angular编译器配置，开启*ngIf的自动类型收窄能力，配置生效后你原来的代码就可以正常运行不需要修改：

{
  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictTypeNarrowingInngIf": true
  }
}

方案3：逻辑移入TS文件（类型最安全） #

在组件TS文件中定义getter处理非空逻辑，原生TS的类型收窄完全生效，不会出现类型报错：

// 组件ts文件中
get safeProductInfo(): string {
  return this.product?.info ?? '';
}

模板中直接绑定处理后的值即可：

<quill-view-html [content]="safeProductInfo"></quill-view-html>

方案4：用$any绕过类型检查（不推荐，仅临时解决） #

如果需要快速绕过校验，可以用Angular内置的$any()方法转换类型：

<quill-view-html [content]="$any(product.info)"></quill-view-html>

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