CODEWITHSUNDEEP
angulartypescript
user11786942
user11786942

Reputation:

Angular *ngFor only showing 1 data item

I have some data which I need to list using ngFor like this:

 <ul *ngFor="let dat of data; let i = index">
   <li>{{ dat[i].name }} - {{ i }}</li>
 </ul>

The problem with the code above is it's only showing 1 item.

But I know that the items are there because when I do this:

  {{ dat[0].name }}

  {{ dat[1].name }}

The above gives me different items as expected but when I try to loop like this:

  {{ dat[i].name }}

It will only show the first one.

How can I fix this?

Upvotes: 1

Views: 2633

Answers (3)

Dmitry Vasilkov
Dmitry Vasilkov

Reputation: 76

if data it's array, you dont need use [i] on iterable elems dat. use only dat.name

Upvotes: 0

mbojko
mbojko

Reputation: 14699

From what you're presenting, data is a 1-element array, it's dat (data's element) that has length (so, data would be something like [[obj1, obj2, obj3]], instead of [obj1, obj2, obj3]). Hence you should iterate over's data's 0-th - and only - element, like this:

<ul *ngFor="let dat of data[0]; let i = index">

Upvotes: 0

Adrita Sharma
Adrita Sharma

Reputation: 22203

To iterate using ngFor, no need to add index. Replace dat[i].name with dat.name

Try this:

Since it is unclear the format of data, there are 2 possibilities:

For,

 data = [
    { name: "one" },
    { name: "two" }
  ]

 <ul *ngFor="let dat of data; let i = index">
   <li>{{ dat.name }} - {{ i }}</li>
 </ul>

For,

 data = [
    [
      { name: "one" },
      { name: "two" }
    ]
  ]

 <ul *ngFor="let dat of data[0]; let i = index">
   <li>{{ dat.name }} - {{ i }}</li>
 </ul>

Upvotes: 2

Related Questions