循环到包含对象的可观察数组中 错误：找不到不同的支持对象"[对象对象]"

Question

我知道这个主题在StackOverflow上经常被处理，但我在以前的帖子中没有找到我问题的答案。

我尝试了这种解决方案，但没有结果。这里或这里……还有其他许多人。我不能用它们来解决我自己的问题。

问题是:我的web API返回这种结构:(数组包含对象包含数组)

[
{
"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": "[e-mail]",
"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": "[e-mail]",
"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
}
]

我的TruckComment模型是:

export interface TruckComment {
id         : number;
userAccount: UserAccount;
truckId    : number;
comment    : string;
date       : Date;
}

数据来自可观察对象。

在html部分，我尝试这样显示这些数据:

<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>

但是我在浏览器控制台中得到这个错误信息:

错误:找不到类型为object的不同支持对象'[object object]'。NgFor只支持绑定到数组之类的Iterables。

我也尝试了keyvalue，但没有任何变化。

谁能帮我看看问题出在哪里吗?由于编辑:我的观察对象是这样定义的public orders$ : Observable<Order[]>;

Answer 1

似乎你已经得到了答案，但将在这里留下一个stackblitz:

https://stackblitz.com/edit/angular-dyphl4

一般来说，你会想要一个扁平化/标准化的项目列表，但那将是另一回事。这是Vamsi Vempati的一篇好文章 https://medium.com/angular-in-depth/the-benefits-of-application-state-normalization-in-angular-f93392ca9f44

Answer 2

我找到了解决方案，感谢你abhishek!

确实orderDetails是一个数组，但在我的模型它是一个简单的对象。

我将其更改为模型中的数组:

export interface Order {
id?          : number;
truckId      : number;
userAccountId: number;
orderStatusId: number;
dateIn?      : Date;
dateOut?     : Date;
orderDetails?: OrderDetails[];
userAccount? : UserAccount;
truckMenu?   : TruckMenu;
}

在html部分我这样做:

<td>
<span *ngFor="let d of (order.orderDetails)">{{d.truckMenu?.title}}</span>
</td>

谢谢你的帮助@abhishek sahu !

编辑:经过多次搜索，我也发现了错误信息的响应:Cannot find a different supporting object [object object](见下文)。

通过这篇文章。

在我的服务中，我修改了这个:

private _comments: BehaviorSubject<TruckComment[]> = new BehaviorSubject({} as TruckComment[]);

By this:

private _comments: BehaviorSubject<TruckComment[]> = new BehaviorSubject([] as TruckComment[]);

this {} by this []

希望能对别人有所帮助。