如何在屏幕上显示JSON表示而不是[Object Object]

Question

我正在制作一个测试版的AngularJS 2应用程序.我想在我的页面中显示一个对象的JSON表示,但它显示[Object Object]而不是 {key1:value1 ....}

从我可以使用的组件:

get example() {return JSON.stringify(this.myObject)};

然后在模板中:

{{example}}

但如果我有一个对象数组并想打印这些对象的列表,我该怎么做呢？

使用:

<ul>
   <li *ngFor="#obj of myArray">{{obj}}</li>
</ul>

结果如下:

- [Object Object]
- [Object Object]
- [Object Object]
- [Object Object]

等等.有没有办法将它们显示为JSON？

Answer 1

如果要查看Web应用程序中对象内部的内容,请在组件HTML模板中使用json管道,例如:

<li *ngFor="let obj of myArray">{{obj | json}}</li>

使用Angular 4.3.2进行测试和有效.

Answer 2

我们可以使用角管json

{{ jsonObject | json }}

Answer 3

循环访问JSON对象:在Angluar(6.0.0+)中,现在它们提供了管道keyvalue:

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

请继续阅读

只显示JSON

{{ object | json }}

Answer 4

可以在不使用的情况下实现将对象内容转储为JSON ngFor.例:

宾语

export class SomeComponent implements OnInit {
    public theObject: any = {
        simpleProp: 1,
        complexProp: {
            InnerProp1: "test1",
            InnerProp2: "test2"
        },
        arrayProp: [1, 2, 3, 4]
    };

标记

<div [innerHTML]="theObject | json"></div>

输出(通过美化器以获得更好的可读性,否则输出为单行)

{
  "simpleProp": 1,
  "complexProp": {
    "InnerProp1": "test1",
    "InnerProp2": "test2"
  },
  "arrayProp": [
    1,
    2,
    3,
    4
  ]
}

我还发现了一个JSON格式化程序和查看器,它显示更大的JSON数据更具可读性(类似于JSONView Chrome扩展):https://www.npmjs.com/package/ngx-json-viewer

<ngx-json-viewer [json]="someObject" [expanded]="false"></ngx-json-viewer>

Answer 5

您可以通过两种方式获取值：-

1. 使用点表示法 (obj.property) 访问对象的属性。
2. 通过传入键值来访问对象的属性，例如 obj["property"]

Answer 6

<li *ngFor="let obj of myArray">{{obj | json}}</li>