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

Question

我有一个嵌套对象数据-

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

    }

我存储在items object.Then, 我尝试使用 -

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

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

Answer 1

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

另一个获取名字的例子：

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

Answer 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

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

How to print a nested object in Angular 7?

angular

typescript

object

angular7