带支架属性访问器的安全导航操作员

时间:2018-01-19 22:08:04

标签: angular properties safe-navigation-operator

我遇到了一个我无法使用点表示法来访问属性的情况,因为该属性的名称包含一个点。

我有一个名为translations的对象,其属性包含字符串翻译,例如Tooltip.O2属性包含图像工具提示的翻译:

<img [matTooltip]="translations?.Tooltip.O2" [src]="bed.additionalO2 ? medO2 : noO2">

当我这样做时,它认为我正在尝试使用Tooltip属性访问translations内的O2对象。我知道我可以使用括号表示法来访问它:

[matTooltip]="translations['Tooltip.O2']"

但是,安全导航操作符?似乎不能与括号表示法一起使用。我曾尝试写translations?['Tooltip.O2'],但这会导致错误。

我想知道是否有办法使用点表示法访问该属性,或者是否有办法使用带括号表示法的safe navigtaion运算符?

4 个答案:

答案 0 :(得分:1)

有一种使用带括号表示法的安全导航运算符的方法。实际上,安全的导航操作员被正式称为可选链接操作员。 docs的语法:

obj.val?.prop
obj.val?。[expr]
obj.arr?。[index]
obj.func?。((args)

因此,您需要使用translations?.['Tooltip.O2']

答案 1 :(得分:0)

这是我的典型特征。正如我发布我的问题,我想出了一个解决方案。

我做的是以下内容:

[matTooltip]="translations ? translations['Tooltip.O2'] : null"

答案 2 :(得分:0)

你能初始化翻译obj吗?这样可以避免任何错误。

translations = {}

答案 3 :(得分:0)

您可以使用条件运算符进行null检查

[matTooltip]="translations ? translations['Tooltip.O2'] : null"