Angular模板属性绑定中安全导航操作符使用报错问题咨询

你的问题出在安全导航操作符的语法使用错误，Angular的安全导航操作符是?.（问号加英文点），不是单独的?，而且需要正确应用在每一个可能为null/undefined的属性或数组访问节点上。

错误写法的问题 #

你写的表达式：

[innerHTML]="foo.bar.baz[v1].foobar[v2]?[v3]?[v4]?[v5]"

这里的?[v3]写法完全不符合Angular模板语法规则。Angular解析器会把单独的?识别为三元表达式的起始标记，而三元表达式要求完整的条件 ? 真值 : 假值结构，你只写了?后面的部分，缺少: 假值环节，所以才会抛出Parser Error: Conditional expression... requires all 3 expressions的错误。

正确的安全导航写法 #

要实现链式的空值安全访问，需要在每个可能为空的访问节点前添加?.，包括数组索引访问的场景：

[innerHTML]="foo?.bar?.baz[v1]?.foobar[v2]?.[v3]?.[v4]?.[v5]"

• 如果你能确保foo.bar一定不为空，可以省略前面的?.，但建议对所有可能为空的层级都加上，避免潜在的空值错误。
• 数组索引访问的?.[v3]是正确写法，它会先判断前面的foobar[v2]是否存在，再尝试访问索引v3。

为什么长表达式能正常运行 #

你写的等价长表达式：

[innerHTML]="foo.bar.baz[v1].foobar[v2] && foo.bar.baz[v1].foobar[v2][v3] && foo.bar.baz[v1].foobar[v2][v3][v4] ? foo.bar.baz[v1].foobar[v2][v3][v4][v5] : ''"

是通过&&做短路判断（前面的节点为空时直接终止判断），最后用完整的三元表达式返回目标值或空字符串，语法完全符合Angular模板解析规则，所以能正常运行，但写法冗余，不如安全导航操作符简洁直观。

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