Angular2 typescript how to get object properties to display in template

Question

I am learning angular2 and typescript and wondering why I can not access property values of the object in my template.

My component:

export class Farm{

    data:JSON;
    id: any;

    constructor(private nextService: NextService, navParams: NavParams){
        this.id = navParams.get("param1");

    }

    getFarmDetails(){

        this.data = this.nextService.fetchData(this.id)
        console.log(this.data)
    }
}

where console.log(this.data) gives me Object {id: 1, name: "Leanne Graham", username: "Bret", email: "[email protected]", address: Object…}

In my template I have

<div>
    {{data}}
</div>

which outputs on my screen as [object Object]

How can I instead output properties like email or username?

UPDATE: If I do like {{data.email}} I get following error:

toskv · Accepted Answer · 2016-06-28 10:13:28Z

27

You can access those properties as you would in javascript.

For example:

{{data.email}}

If the data is retrieved asynchronously you can use the elvis operator ?. to avoid the errors while data is null.

{{data?.email}}

edited Jun 28, 2016 at 10:13

answered Jun 28, 2016 at 9:50

toskv

31.8k7 gold badges77 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thinker Over a year ago

I tried that but it throws error: ORIGINAL EXCEPTION: TypeError: Cannot read property 'email' of undefined

sofly Over a year ago

Thank you! You just saved me another hour of debugging issues and facepalming. The "elvis" operator is also called the "safe navigation operator" sometimes

toskv Over a year ago

@SoFLy that's what SO is for. :)

Collectives™ on Stack Overflow

Angular2 typescript how to get object properties to display in template

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest