Angular 2模板中非undefined对象属性校验：两种写法的问题探讨

嘿，我来帮你把Angular模板里的这个属性检查问题讲清楚～

本质上，我们的核心需求是避免空值引用错误（也就是常说的"Cannot read property 'xxx' of undefined"），同时准确判断属性是否符合预期。常用的正确方式主要有两种：

• 逻辑与操作符（&&）：通过短路求值，先判断对象是否为真（非undefined、null、空字符串、0等假值），再访问属性。比如你写的obj && obj.length，如果obj是假值，后面的属性访问会被直接跳过，不会报错。
• 可选链操作符（?.）：这是更简洁的语法，当对象是undefined或null时，整个表达式直接返回undefined，不会尝试访问后续属性；如果对象存在，则正常返回属性值。也就是你提到的obj?.length。

除此之外，如果是处理异步数据（比如Observable），更推荐结合async管道使用，比如*ngIf="(data$ | async)?.length"，能自动处理订阅和取消订阅，避免内存泄漏。

你提到的两种写法在大多数场景下表现一致，但选择方式2替代方式1时，需要注意几个关键点：

1. Angular版本兼容性 #

可选链操作符在Angular模板中的支持是从Angular 9开始的（依赖Ivy编译器）。如果你的项目还在使用Angular 8或更早的版本，模板里直接写?.会导致编译错误，这时候只能用方式1（obj && obj.length）。

2. 语义上的细微差异 #

虽然两种写法在判断"对象存在且length大于0"时结果相同，但底层逻辑有区别：

• 方式1的obj && obj.length：先判断obj是否为truthy值（即非undefined、null、0、""、false、NaN），只有当obj是truthy时，才会访问length。如果obj是一个假值（比如数字0），整个表达式直接返回假值，不会触发属性访问。
• 方式2的obj?.length：仅当obj是undefined或null时才会短路返回undefined；如果obj是其他假值（比如数字0、空字符串""），仍然会尝试访问length属性。不过好在这类假值要么本身有合法的length（比如空字符串的length是0），要么访问length会返回undefined，而0和undefined在*ngIf中都会被视为假，所以最终渲染结果和方式1一致。

3. 极端场景的表现 #

假设obj是一个没有length属性的truthy对象（比如{name: 'test'}）：

• 方式1：obj && obj.length → true && undefined → 返回undefined，*ngIf会隐藏元素。
• 方式2：obj?.length → 返回undefined，*ngIf同样隐藏元素。

这种场景下两者结果还是一致的，不会有问题。

如果你的项目使用的是Angular 9及以上版本，完全可以用方式2替代方式1，它的语法更简洁，可读性更高，而且不会引入额外问题。如果是老版本项目，就只能坚持用方式1啦。

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