我知道如果我有像product.id == 1 ? stuff : not stuff这样的东西。那意味着如果id = 1,就选择“stuff”。如果不是,则选择“not stuff”。那么以下内容是什么意思:
product?.id.name
我知道如果我有像product.id == 1 ? stuff : not stuff这样的东西。那意味着如果id = 1,就选择“stuff”。如果不是,则选择“not stuff”。那么以下内容是什么意思:
product?.id.name
?
表示安全的 导航运算符
来自文档
Angular安全导航运算符(?.)是一种流畅和方便的方式,用于保护属性路径中的null和undefined值。在这里,它会防止当前英雄为null时的视图渲染失败。
具体来说,如果您绑定到视图的值为null,则应返回null,否则返回实际值,以便在呈现模板时不会出现任何问题。
在您提供的代码示例中,
product?.id.name
它先检查produce对象是否存在,然后检查是否有id,因为您在id后面没有使用?
,它将引发错误“无法读取未定义的'name'属性”。
?.
短路运算符。如果 product
不存在,则表达式计算为 null,且不会评估 product.id
。除非 product
存在且 product.id
不存在,否则它不应该抛出错误。 - cHao((product == null) ? null: product.id.name)
如果product
为空,则返回null
,否则返回整个值。
如果我们有:
product?.id?.name
那么我们应该期望类似这样的东西:
((product == null) ? null: ((product.id == null) ? null: product.id.name))
如果你有疑问,那么你总是可以在 Angular 编译器之后查看它的外观:
更多详情请参阅文档:
这只是对product && product.id.name
的语法糖。
Angular安全导航运算符(?.)可以防止访问空或未定义的组件属性
假设您在组件中有一个名为person
的属性,它可能是null
或undefined
{{person.name}} // in case of null Uncaught TypeError: Cannot read property 'name' of null
{{person?.name}} // working fine