在角度 8 表上打印嵌套对象答案

【问题标题】：Printing nested object on angular 8 table在角度 8 表上打印嵌套对象
【发布时间】：2020-06-10 14:07:01
【问题描述】：

大家好，我有来自 mongo db 的 http 响应，我获取的值类似于

loadOrders(){
    this.orderService.getOrders()
      .subscribe((data:any[])=>{
        this.orders=data;
      }   
      );
  }

在orders-list component.html 中，我将值打印到表格中，例如：

  <tr *ngFor='let order of orders'>
            <td>{{order.name}}</td>
            <td>{{order.basket}}</td>
            <td>{{order.address}}</td>
            <td>{{order.total}}</td>
            <td class="text-center">
                <button (click)="deleteOrder(order._id)" class="btn btn-danger btn-xs">
                    <span class="glyphicon glyphicon-remove">Delete</span>
                </button>
            </td>
        </tr>

显示名称、地址等值，但是当我尝试访问 orders.basket 时，它正在打印表格，例如： [object Object] 我尝试了几种方法，比如映射整个数组，但是当我这样做时，其他值没有正确显示，这是我的篮子响应的完整输出：

  basket:
    5e839d3b268ce30ef066cb84:
    item:
    name: "Pizza"
    price: 25
    quantity: 501
    __v: 0
    _id: "5e839d3b268ce30ef066cb84"

我想访问购物篮 - > 表中的项目对象。谢谢大家的回答。

编辑：添加了屏幕截图。

编辑：我尝试访问对象

<td *ngFor = "let subItem of order.basket">{{subItem.basket.name}}</td>

但我无法找到“对象”类型的不同支持对象“[对象对象]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays。错误

【问题讨论】：

orders.basket 中到底是什么？
您的 API 的响应不是很清楚。能否请您澄清一下篮子的形式？
@DenizFirat：屏幕截图更适合这里。缺少缩进也无济于事。
你想展示什么？名称或所有详细信息？
@DenizFirat 我的错。我刚刚重新检查了您的屏幕截图。你实际上有一个复杂的场景。可以遍历篮子数组中每个项目的更改的键。您将不得不使用Object.values() 来分离出核心项目对象。或者获取Object.keys()，然后以basket[key].item.name 访问每个basket 值

标签： arrays json angular object

【解决方案1】：

这是使用Object.keys() 提取keys 并显示basket 项的实现。完整代码请参考 Stackblitz 链接。

HTML

<table>
    <tr>
        <th>Name</th>
        <th>Basket</th>
        <th>Address</th>
        <th>Total</th>
    </tr>
    <tr *ngFor='let order of orders'>
        <td>{{order.name}}</td>
        <td>
            <div *ngFor="let key of getKeys(order.basket)">
                {{ order.basket[key].item.name }}
            </div>
        </td>
        <td>{{order.address}}</td>
        <td>{{order.total}}</td>
    </tr>
</table>

  getKeys(obj: any): Array<string> {
    return Object.keys(obj);
  }

https://stackblitz.com/edit/angular-ivy-inzfdw

【讨论】：

我实现了您的解决方案，它运行良好，我可以访问篮子数组中的所有值，谢谢。