Loop into observable array containing objects Error: Cannot find a differ supporting object '[object Object]'

Question

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

我尝试了这种解决方案，但没有结果。 or ...以及许多其他人。我无法让它们适应我自己的问题。

问题来了：我的网站APIreturns这种结构：(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": "customer@test.be",
            "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": "customer@test.be",
            "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;
}

数据来自 observable。

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

但我在浏览器控制台中收到此错误消息：

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

我也试过键值但没有任何变化。

谁能帮我看看是哪里出了问题？谢谢

编辑：我的 observable 是这样定义的 public orders$ : Observable<Order[]>;

Answer 1

感谢 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 的帮助！

编辑：经过大量搜索，我还找到了对错误消息的响应：找不到不同的支持对象 [object Object]（见下文）。

通过这个.

在我的服务中我改变了这个：

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

通过这个：

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

这个 { } 通过这个 [ ]

希望这可以帮助到其他人。

Answer 2

看来您已经得到了答案，但将在这里留下一个堆栈闪电战：

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

一般来说，您会想要一个 flatten/normalized 项目列表，但那就是另一回事了。这是来自 Vamsi Vempati

的精彩读物

https://medium.com/angular-in-depth/the-benefits-of-application-state-normalization-in-angular-f93392ca9f44

Loop into observable array containing objects Error: Cannot find a differ supporting object '[object Object]'

Loop into observable array containing objects Error: Cannot find a differ supporting object '[object Object]'

javascript

observable

typescript

angular