Refere to object in object by interpolation (Angular 2+)

Question

I have a data structure like this:

post : {
 content: 'content',
 creator: {
  name: 'Jones',
  id: 1,
  avatar: 'jones.png'
 }
}

In HTML i want to display by interpolation for example the name of the creator.

I tried that:

{{ post.creator.name }}

But in app, at this place is an empty field.

could you please paste your controller or class file of the component — Shushanth Pallegar
– Shushanth Pallegar, Commented Nov 28, 2018 at 11:07
what exactly is the problem here? name has value but still, it is not appearing in HTML. — ashish pal
– ashish pal, Commented Nov 28, 2018 at 11:15

לבני מלכה · Accepted Answer · 2018-11-28 12:29:38Z

1

You have to declare object as below:

 post = {
  content: 'content',
  creator: {
   name: 'Jones',
   id: 1,
   avatar: 'jones.png'
  }
}

EDIT

You can declare type to object post:Post={...}

Then declare classes:

export class Post  {
 content:string;
 creator:Creator
}
export class Creator  {
  name: string;
  id: number;
  avatar: string;
}

answered Nov 28, 2018 at 11:36

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

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

3 Comments

You don't need to specify post: any. The problem is that OP did not set post equal to the object (post = { content... }).

@לבני מלכה but what if I create object by constructor? post = new Post( { ... })?