如何在 Angular 7 中打印嵌套对象？答案

【问题标题】：How to print a nested object in Angular 7?如何在 Angular 7 中打印嵌套对象？
【发布时间】：2021-06-25 21:33:28
【问题描述】：

我有一个嵌套对象数据-

    "data": {
        "serial": "123",
        "def": {
            "id": "456",
            "data": {
                "firstname": "abc",
                },
            "method": "post",
        },
        "ghi": {
            "id": "456",
            "data": {
                "amount": "3500.0",
                    },
            "method": "post",
            },
        "jkl": "done"

    }

我将它存储在 items 对象中。然后，我尝试使用 -

在我的 HTML 组件中打印它

<div *ngFor="let item of items | keyvalue">
        <div>
            <div>{{item.key}}:{{item.value}}</div>
        </div>
</div>

但是输出是-

serial: 123
def: [object Object]
ghi:  [object Object]
jkl: done

如何打印这个嵌套对象？提前致谢！

【问题讨论】：

标签： angular typescript object angular7

【解决方案1】：

您正在使用 ngFor，它主要用于数组，而您没有。我建议您修改您的数据，或者如果它确实需要保留为对象，那么只需执行以下操作：例如 data.def.id - 不需要 ngFor。

另一个获取名字的例子：

{{data?.def?.data?.firstname}}

【讨论】：

在我看来，仅仅说“重构你的数据”并不是一个答案。数据可能来自 Atul 无法控制的某个系统。肯定有很多方法可以实现@Atul 想要的。这些是更容易还是更难是另一个问题。
@AndrewJuniorHoward 实际上，数据是对 API 调用的响应，所以不能修改。
@Atul 好的，但你完全错过了我回答的第二部分。我已经说过，您可以简单地通过沿节点向下导航一个对象。接受的答案虽然有效，但被夸大了。不需要使用 ngFor。
@JorisMolnar 实际上我给出了 2 个答案。两者都满足每个结果
@AndrewJuniorHoward 是的，它无需使用 *ngFor 就可以工作。但是如果数据很大。手动显示它会变得很忙。如果我想访问特定的，您的解决方案可以正常工作。感谢您的帮助:)

【解决方案2】：

我认为对于一个对象，您可能无法像将它用于数组那样使用 *ngFor。我的解决方案是在您的 ts 文件中使用这样的递归函数：

  expand(data: any): string[] {
    let stringArr = [];
    for (const prop in data) {
      data[prop] instanceof Object
        ? (stringArr = stringArr.concat([`${prop}: `]).concat(this.expand(data[prop])))
        : stringArr.push(`${prop}: ${data[prop]}`);
    }
    return stringArr;
  }

然后在您的 HTML 文件中：

<div *ngFor = " let item of expand(data)">
    {{ item }}
</div>

然后它将在您的页面上显示：

serial: 123
def:
id: 456
data:
firstname: abc
method: post
ghi:
id: 456
data:
amount: 3500.0
method: post
jkl: done

【讨论】：