I know the subject has often been treated on StackOverflow but I don't find the answer to my problem in previous posts.
I tried this kind of solution but no results. here or here... and many others. I'm not able to adapt them to my own problem.
Here is the problem: My web API returns this kind of structure: (Array containing objects containing array)
[
{
"userAccountId": 11,
"orderStatusId": 1,
"truckId": 2,
"dateIn": "2021-10-14T18:40:04.6232598",
"dateOut": "2021-10-14T18:40:04.6232621",
"orderDetails": [
{
"orderId": 1,
"truckMenuId": 1,
"truckMenu": {
"truckId": 2,
"foodCategoryId": 5,
"foodCategory": null,
"title": "Spiedirosso - Campagna Naples",
"ingredients": "Vin rouge",
"image": "",
"price": 4.5,
"truck": null,
"description": "Vin rouge au verre",
"shortDescription": "Spiedirosso - Campagna Naples",
"id": 1,
"guid": "c637d764-979a-4ffc-9c61-b40090c47cbf",
"isDeleted": false
},
"quantity": 1,
"id": 2,
"guid": "00000000-0000-0000-0000-000000000000",
"isDeleted": false
},
{
"orderId": 1,
"truckMenuId": 3,
"truckMenu": {
"truckId": 2,
"foodCategoryId": 4,
"foodCategory": null,
"title": "Sabayon au marsala",
"ingredients": "Jaune d'oeuf, sucre en poudre, vin blanc",
"image": "",
"price": 8.5,
"truck": null,
"description": "le délicieux sabayon fait maison",
"shortDescription": "Sabayaon",
"id": 3,
"guid": "685d2e54-4130-4c30-9506-f8ed06008b40",
"isDeleted": false
},
"quantity": 1,
"id": 1,
"guid": "00000000-0000-0000-0000-000000000000",
"isDeleted": false
}
],
"userAccount": {
"userAccountTypeId": 5,
"genderId": 1,
"truckId": null,
"lastName": "Customer",
"firstName": "Customer",
"userName": "customer",
"mail": "[email protected]",
"login": "Customer",
"password": "91ec1f9324753048c0096d036a694f86",
"id": 11,
"guid": "7ce77262-7eb6-459b-94d1-3384856c39d2",
"createdBy": "System User",
"createdOn": "2021-10-14T18:39:35.8390302",
"lastModifiedBy": "System User",
"lastModifiedOn": "2021-10-14T18:39:35.8390313",
"isDeleted": false
},
"id": 1,
"guid": "00000000-0000-0000-0000-000000000000",
"isDeleted": false
},
{
"userAccountId": 11,
"orderStatusId": 1,
"truckId": 2,
"dateIn": "2021-10-15T14:59:07.4481334",
"dateOut": "2021-10-15T14:59:07.4481346",
"orderDetails": [
{
"orderId": 2,
"truckMenuId": 1,
"truckMenu": {
"truckId": 2,
"foodCategoryId": 5,
"foodCategory": null,
"title": "Spiedirosso - Campagna Naples",
"ingredients": "Vin rouge",
"image": "",
"price": 4.5,
"truck": null,
"description": "Vin rouge au verre",
"shortDescription": "Spiedirosso - Campagna Naples",
"id": 1,
"guid": "c637d764-979a-4ffc-9c61-b40090c47cbf",
"isDeleted": false
},
"quantity": 1,
"id": 5,
"guid": "00000000-0000-0000-0000-000000000000",
"isDeleted": false
},
{
"orderId": 2,
"truckMenuId": 3,
"truckMenu": {
"truckId": 2,
"foodCategoryId": 4,
"foodCategory": null,
"title": "Sabayon au marsala",
"ingredients": "Jaune d'oeuf, sucre en poudre, vin blanc",
"image": "",
"price": 8.5,
"truck": null,
"description": "le délicieux sabayon fait maison",
"shortDescription": "Sabayaon",
"id": 3,
"guid": "685d2e54-4130-4c30-9506-f8ed06008b40",
"isDeleted": false
},
"quantity": 1,
"id": 4,
"guid": "00000000-0000-0000-0000-000000000000",
"isDeleted": false
},
{
"orderId": 2,
"truckMenuId": 4,
"truckMenu": {
"truckId": 2,
"foodCategoryId": 4,
"foodCategory": null,
"title": "Il classico Tiramisu",
"ingredients": "Biscuit boudoirs, Mascarpone, oeufs, sucre, café, rhum, cacao en poudre",
"image": "",
"price": 9.5,
"truck": null,
"description": "Un classic, le délicieux tiramissu maison",
"shortDescription": "Tiramissu",
"id": 4,
"guid": "d24f78f9-a225-469c-b94a-31d96909ea15",
"isDeleted": false
},
"quantity": 1,
"id": 3,
"guid": "00000000-0000-0000-0000-000000000000",
"isDeleted": false
}
],
"userAccount": {
"userAccountTypeId": 5,
"genderId": 1,
"truckId": null,
"lastName": "Customer",
"firstName": "Customer",
"userName": "customer",
"mail": "[email protected]",
"login": "Customer",
"password": "91ec1f9324753048c0096d036a694f86",
"id": 11,
"guid": "7ce77262-7eb6-459b-94d1-3384856c39d2",
"createdBy": "System User",
"createdOn": "2021-10-14T18:39:35.8390302",
"lastModifiedBy": "System User",
"lastModifiedOn": "2021-10-14T18:39:35.8390313",
"isDeleted": false
},
"id": 2,
"guid": "00000000-0000-0000-0000-000000000000",
"isDeleted": false
}
]
My TruckComment model is:
export interface TruckComment {
id : number;
userAccount: UserAccount;
truckId : number;
comment : string;
date : Date;
}
Data comes from an observable.
In the html part I try to display this datas like this:
<ng-container *ngIf="(OrderFromService$ | async) as Order">
<h3 class="color-secondary col-md-6"></h3>
<tr *ngFor="let order of Order">
<td>{{order.dateIn | date: 'yyyy-MM-dd HH:mm'}}</td>
<td>{{order.dateIn | date: 'yyyy-MM-dd HH:mm'}}</td>
<td>{{order.orderDetails?.truckMenu?.title}}</td>
<td>{{order.userAccount?.lastName}}</td>
<td>{{order.orderDetails?.truckMenu?.title}}</td>
<td></td>
<td></td>
</tr>
</ng-container>
but I get this error message in the browser console:
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
I also tried with keyvalue but nothing changes.
Can somebody help me to see where is the problem? Thanks
Edit: my observable is defined like this public orders$ : Observable<Order[]>;
CodePudding user response：
seems you already got the answer but will just leave a stackblitz here:
https://stackblitz.com/edit/angular-dyphl4
in general you would want a flatten/normalized list of items but that would be a different story. here's a good read from Vamsi Vempati
CodePudding user response：
I found the solution thanks to you abhishek!
Indeed orderDetails is an array but in my model its a simple object.
I changed it to an array in the model :
export interface Order {
id? : number;
truckId : number;
userAccountId: number;
orderStatusId: number;
dateIn? : Date;
dateOut? : Date;
orderDetails?: OrderDetails[];
userAccount? : UserAccount;
truckMenu? : TruckMenu;
}
and in the html part I do this :
<td>
<span *ngFor="let d of (order.orderDetails)">{{d.truckMenu?.title}}</span>
</td>
Thank you for your help @abhishek sahu !
Edit: After searching a lot, I also found the response to the Error Message : Cannot find a differ supporting object [object Object] (see below).
Through this post.
In my service I changed this:
private _comments: BehaviorSubject<TruckComment[]> = new BehaviorSubject({} as TruckComment[]);
By this one :
private _comments: BehaviorSubject<TruckComment[]> = new BehaviorSubject([] as TruckComment[]);
this { } by this [ ]
Hope this can help someone else.