CODEWITHSUNDEEP
angulartypescriptangular6
user9597092
user9597092

Reputation:

Angular 6 - Issue displaying data with *ngFor (data not showing)

I have some data that looks like this:

enter image description here

On my app.component.html I have this:

<ul>
  <li *ngFor="let data of myData">{{data.id}}</li>
</ul>

When I run this it show the lists but without any values so I just get lots of dots from the <li>

On my app.component.ts I have:

myData;

and then:

this.myData = obj; // Obj contains the data

How can I fix this?

Upvotes: 4

Views: 23696

Answers (3)

Omkar Jadhav
Omkar Jadhav

Reputation: 681

Give Data to myData variable like this==>

    this.myService.myFunction().subscribe(res=>
    this.myData = res['listResponse']['@attributes']['instance']
     )}

Upvotes: 2

Aneri Vala
Aneri Vala

Reputation: 528

Because I guess you created array object something like this 

 myData = [
    {
      '@attributes:': 'id:1'
    },
    {
      '@attributes:': 'id:2'
    }
  ];

That is wrong and has to be like this.First Check your array or array Object.

 myData = [
    {
      attribute: 'abc',
      id: 1
    },
    {
      attribute: 'bcs',
      id: 2
    }
  ];

and in Html file

<ul>
  <li *ngFor="let data of myData">{{data.id}}</li>
</ul>

Upvotes: 4

Roberto Zvjerković
Roberto Zvjerković

Reputation: 10137

<ul *ngFor="let data of myData">
  <li>{{data.id}}</li>
</ul>

You're creating multiple <ul> elements, while you probably want to have multiple <li> (list item) elements:

<ul>
  <li *ngFor="let data of myData">{{data.id}}</li>
</ul>

Upvotes: 6

Related Questions