堆栈内存溢出
  简体   繁体   English

循环到包含对象的可观察数组

[英]Loop into observable array containing objects

 原文  2021-10-16 10:00:11  0   2    javascript/ angular/ typescript/ observable

问题描述

I know the subject has often been treated on StackOverflow but I don't find the answer to my problem in previous posts.我知道这个主题经常在 StackOverflow 上被处理，但我在以前的帖子中没有找到我的问题的答案。

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)这是问题所在：我的 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": "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
    }
]

My TruckComment model is:我的 TruckComment 模型是：

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

but I get this error message in the browser console:但我在浏览器控制台中收到此错误消息：

Error: Cannot find a differ supporting object '[object Object]' of type 'object'.错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor only supports binding to Iterables such as Arrays. NgFor 仅支持绑定到可迭代对象，例如数组。

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[]>;编辑：我的 observable 定义如下public orders$ : Observable<Order[]>;

2 个解决方案

解决方案1
 1  2021-10-16 11:24:42

I found the solution thanks to you abhishek!感谢您 abhishek，我找到了解决方案！

Indeed orderDetails is an array but in my model its a simple object.实际上 orderDetails 是一个数组，但在我的模型中它是一个简单的对象。

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 :在 html 部分我这样做：

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

Thank you for your help @abhishek sahu !感谢您的帮助@abhishek sahu ！

解决方案2
 1  2021-10-16 11:57:09

seems you already got the answer but will just leave a stackblitz here:似乎你已经得到了答案，但只会在这里留下一个堆栈闪电战：

https://stackblitz.com/edit/angular-dyphl4 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这是 Vamsi Vempati 的好书

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何遍历包含对象对象的数组 - How to loop through an array containing objects of objects 循环遍历包含对象数组的 JSON object - Loop over a JSON object containing an array of objects 如何遍历包含对象的数组和 JS 中的对象数组 - How to loop through array containing objects and array of objects in JS 遍历包含数组的JSON对象，该数组包含的对象包含包含etc的数组 - Loop through JSON object containing array containing objects containing arrays containing etc 你能返回一个对象数组，每个 object 都包含一个来自 forkJoin 的 observable 吗？ - Can you return an array of objects, with each object containing an observable from forkJoin? 如何遍历包含对象的数组并访问它们的属性 - How to loop through an array containing objects and access their properties Knockout.js可观察对象绑定的可观察数组 - knockoutjs observable array of observable objects binding 合并包含数组的对象 - Merge objects containing array 破坏包含对象的数组 - destructing array containing objects 声明包含对象的对象数组 - Declare array of objects containing objects
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM