I am attempting to showcase the data stored in the array products from home.ts on the home.html file.
export class HomePage {
public products: any[] = [
{
theater: {
'30': {
id: '44',
name: 'product 30',
},
},
party: {
'31': {
id: '45',
name: 'product 45',
},
'32': {
id: '46',
name: 'product 46',
},
},
},
];
constructor(
public navCtrl: NavController,
public alertCtrl: AlertController
) {}
}
interface userData {
name: string;
email: string;
testType: string;
}
Here is the code snippet from home.html:
<div *ngFor="let product of products[0]">
<ion-card style="padding:0; margin:0; border-radius: 0; border-bottom: solid rgb(215, 215, 215) 1px;" *ngFor="let product of category">
<ion-card-content style="padding:0; margin:0;">
<ion-list>
<ion-item lines="none" style="color: black;">
<ion-thumbnail slot="start">
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" style="border-radius: 50%;" />
</ion-thumbnail>
<ion-label>
<p style="font-weight: 800; color: black;">Name: {{category.name}}</p>
<p style="color: black;">31/12 às 22hrs</p>
<p style="font-style: italic; color: black;">Cachaçamba,</p>
<p style="color: black;">Rio Verde - GO</p>
</ion-label>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</div>
Unfortunately, I am encountering an error:
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
Could you suggest a better approach to display the sub array based on the key's value party?
You can view my code on: stackblitz