循环到包含对象的可观察数组
[英]Loop into observable array containing objects
问题描述
我知道这个主题经常在 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": "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;
}
数据来自可观察的。
在 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 仅支持绑定到可迭代对象，例如数组。
我也尝试过使用键值，但没有任何变化。
有人可以帮我看看问题出在哪里吗？ 谢谢
编辑：我的 observable 定义如下public orders$ : Observable<Order[]>;
2 个解决方案
解决方案1
1 2021-10-16 11:24:42
感谢您 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 ！
解决方案2
1 2021-10-16 11:57:09
似乎你已经得到了答案，但只会在这里留下一个堆栈闪电战：
https://stackblitz.com/edit/angular-dyphl4
一般来说，您需要一个扁平化/标准化的项目列表，但那将是另一回事。 这是 Vamsi Vempati 的好书
遍历包含数组的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?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.