After receiving data from the server, it looks like this:
{
7281: [//post id
{
tags: [
{
name: 'name',
link: 'link'
},
{
name: 'name',
link: 'link'
}
]
}
]
}
The file postlist.ts has a property declaration:
private postlists: Observable<any>;
This is the method used to fetch the JSON:
loadData() {
var
url: string = '...';
this.http.get<any>(url)
.subscribe(
data => {
this.postlists = data;
},
error => {
console.log(error);
}
);
}
In the template file, we render the received object as follows:
<div sino-item *ngFor="let post of postlists">
<div *ngFor="let data of post">
<div *ngFor="let tag of data.tags">
<p><a href="{{tag.link}}">{{tag.name}}</a></p>
</div>
</div>
</div>
An error message occurs:
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
What could be causing this issue?
Despite making corrections, when building, Ionic throws the following error:
ERROR in src/app/postlist/postlist.page.html:7:78 - error TS2769: No overload matches this call.
The last overload gave the following error.
Argument of type 'Observable<any>' is not assignable to parameter of type 'Map<unknown, unknown>'.
Type 'Observable<any>' is missing the following properties from type 'Map<unknown, unknown>': clear, delete, get, has, and 7 more.
7 <div *ngFor="let post of postlists | keyvalue">
~~~~~~~~~
src/app/postlist/postlist.page.ts:8:16
8 templateUrl: './postlist.page.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component PostlistPage.
[ERROR] An error occurred while running subprocess ng.