Display data from list with index using angular 2

Question

How to display data in HTML from a list without using *ngFor for example like This list[5].name

I tried this :

PostList[5].{{def}}

{{PostList[5].def}}

They were basically asking, how can you retrieve an object in an array given a specific index in html. They are avoiding having to iterate through the array. — martinomburajr
– martinomburajr, Commented Dec 14, 2017 at 16:26

martinomburajr · Accepted Answer · 2017-12-14 13:37:28Z

2

In your case {{PostList[5].def}} works.

Assuming you have your component initializing a simple list with an Object

export class AppComponent  {
  list = new Array<{name: string}>();

  constructor() {
    this.list[0] = {"name": "Martin"}
    this.list[1] = {"name": "Emma"}
    this.list[2] = {"name": "Daisy"}
  }
}

and if you want to get Emma, your view will therefore be.

<p>
  {{list[1].name}}
</p>

//Output Emma

Update I would like to add that, if for instance the list doesnt have a certain index e.g index greater than 2, or the value is null. You can use the ? operator in html to be safe.

Therefore {{list[3]?.name}} wont crash your app, even though the output is null.

answered Dec 14, 2017 at 13:37

martinomburajr

1,2753 gold badges14 silver badges31 bronze badges

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

Comments

Tanel Jõeäär · Accepted Answer · 2017-12-14 13:37:51Z

0

{{PostList[5].def}} should work if you have this.PostList variable in your component (and it is an array which 6th element is an object with def)

answered Dec 14, 2017 at 13:37

Tanel Jõeäär

5898 silver badges17 bronze badges

Collectives™ on Stack Overflow

Display data from list with index using angular 2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related