文章/答案/技术大牛

发布

社区首页 >问答首页 >如何打印角7中的嵌套对象？

问如何打印角7中的嵌套对象？
EN

Stack Overflow用户

提问于 2021-03-29 20:30:48

回答 2查看 381关注 0票数 0

我有一个嵌套对象数据-

    "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中，我尝试使用-

<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

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-03-29 22:21:34

我认为对于一个对象，您可能无法使用*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

票数 0

Stack Overflow用户

发布于 2021-03-29 20:43:18

您使用的是ngFor，它主要用于数组，而您没有。我建议您修改您的数据，或者如果它确实需要保留为一个对象，那么只需这样做:例如，data.def.id -不需要ngFor。

另一个获得名字的例子是：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66861255

复制

相似问题

问如何打印角7中的嵌套对象？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何打印角7中的嵌套对象？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何打印角7中的嵌套对象？
EN