字符串插值导致Angular 2 App中出现未定义错误

Question

I am trying to display some data to the view in my Angular 2 app via string interpolation. For most of the page that's working, but I'm getting an error in this one section that's not making sense to me. It looks like it should work, but I'm getting an 'undefined' error.

Here's what the data looks like that I'm accessing (note: "contacts" is on the root of the document):

"contacts": [
    {
        "contact": {
            "_id": "111111111",
            "email": [
                "person@email.com"
            ],
            "name": {
                 "first": "Person",
                 "last": "Lastname"
            }
     }
]

I am trying to access the email value in my template using this:

First I tried accessing the email address like this:

{{contacts[0]?.contact?.email[0]}}

But got this error:

Cannot read property '0' of undefined

So then I tried a named index:

{{contacts['contact']?.email[0]}}

This is also not working. I get this error:

Cannot read property 'contact' of undefined

And this is for a record where I know there is a value there. So I'm unclear why this isn't working? Anything look wrong about how I'm accessing the values here?

Answer 1

Contacts is an array , you should access with index

{{contacts[0]?.contact?.email[0]}}

if not use ngFor

<li *ngFor="let conctact of contacts">
      {{ conctact.email[0]}}
</li>