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

我正在使用Beta版本制作AngularJS 2应用程序。我想表明我的页面对象的JSON表示，但它表明[Object Object]，不 {key1:value1 ....}

从组件中，我可以使用：

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

然后在模板中：

{{example}}

但是，如果我有一个对象数组，并且想打印这些对象的列表，该怎么办？

使用：

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

结果如下：

-[对象对象]
-[对象对象]
-[对象对象]
-[对象对象]

等等。有没有办法将其显示为JSON？

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

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

使用Angular 4.3.2测试并有效。

我们可以使用角度管道json

{{ jsonObject | json }}

遍历JSON对象：在Angluar（6.0.0+）中，现在它们提供管道keyvalue：

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

还阅读

只显示JSON

{{ object | json }}

无需使用即可将对象内容转储为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>

有两种方法可以获取值：-

1. 使用点表示法（obj.property）访问对象的属性。
2. 通过传入键值（例如obj [“ property”]）来访问对象的属性

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

使用新语法更新他人的答案：

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

如果您有对象数组，并且想在组件中反序列化它们

get example() { this.arrayOfObject.map(i => JSON.stringify (i) ) };

然后在模板中

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

this.http.get<any>('http://192.168.1.15:4000/GetPriority')
  .subscribe(response => 
  {
  this.records=JSON.stringify(response) // impoprtant
  console.log("records"+this.records)
  });