Angular中*ngIf无法充当类型守卫引发属性不存在错误的问题

你的核心问题是TypeScript无法将check变量和item的类型关联起来，*ngIf的布尔条件本身不能作为类型守卫——即使check为true，TypeScript仍认为item可能是Interface1，所以访问item.section.property1会触发类型错误。而改成交叉类型Interface1&Interface2是完全错误的，因为这要求section同时是字符串和对象，实际运行时section是对象，所以显示[object Object]。

正确解决方案：自定义类型守卫 #

通过定义类型谓词函数，让TypeScript能准确判断item的类型，模板中的*ngIf会基于这个函数的返回值做类型收窄。

1. 在组件类中添加类型守卫函数：

// 类型谓词函数，返回true时，TypeScript会认定item是Interface2
isInterface2(item: Interface1 | Interface2): item is Interface2 {
  // 通过检查section是否为对象且包含property1属性来判断类型
  return typeof (item as Interface2).section === 'object' && (item as Interface2).section.property1 !== undefined;
}

2. 修改模板代码，用这个函数替代原有的check变量：

<h2 *ngIf="isInterface2(item)">
  {{ item.section.property1 }}
</h2>
<h2 *ngIf="!isInterface2(item)">
  {{ item.section }}
</h2>

为什么这个方法有效？ #

类型谓词函数item is Interface2明确告诉TypeScript：当函数返回true时，参数item一定是Interface2类型。模板中*ngIf="isInterface2(item)"会触发类型收窄，此时TypeScript会确认item.section是对象类型，允许访问property1；反之，!isInterface2(item)时，item会被认定为Interface1，item.section是字符串类型，直接渲染即可。

额外说明 #

• 不要用交叉类型Interface1&Interface2处理互斥的类型场景，交叉类型要求同时满足两个接口的所有属性，这在你的业务逻辑中是不可能实现的。
• 也可以在模板中直接使用类型断言（比如{{ (item as Interface2).section.property1 }}），但这种方式不够安全，一旦类型判断错误会导致运行时错误，自定义类型守卫是更可靠的方案。

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