I have some data that looks like this:
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?
<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>
<li *ngFor="let data of myData.listResponse.instance">{{[email protected]}}</li>console.log(obj.listResponse.instance[0])?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>
Give Data to myData variable like this==>
this.myService.myFunction().subscribe(res=>
this.myData = res['listResponse']['@attributes']['instance']
)}
console.log(myData)prints?