Angular2 using Elvis operator on object key with forward slash

Question

I had problems with parsing, which is solved with Elvis operator, but if I have key that contains forward slash, I cant use Elvis operator because I have to put that key into square brackets.

Works if key is simple like this ( "firstname" )

{{ data?.record?.firstname }}

Does not work if key has forward brackets like this ( "name/first" )

{{ data?.record?['name/first']}}

It seems that Elvis is not available if I use square brackets.

Any workaround? Maybe a way to escape forward slash in . notation like this:

{{ data?.record?.name\\/first }}

Answer 1

The Elvis operator is only available for the . not for other dereference operators like [].

As a workaround use

{{ data?.record ? data.record['name/first'] : null}}

Answer 2

Actually, you can use both the ? and [] at the same time:

Sintaxe

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

In your case, it should be:

{{ data?.record?.['name/first']}}

And still works if it's an array, like this:

attributes['bar/foo']?.[0]

Very useful... :-)

source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining