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

我正在testing版本的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？

Answer 1

如果你想看看你的web应用中的对象是什么，那么在组件HTML模板中使用jsonpipe道 ，例如：

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

使用Angular 4.3.2进行testing和validation。

Answer 2

我们可以使用angularpipejson

 {{ jsonObject | json }} 

Answer 3

有两种方法可以获得价值： –

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

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 ] } 

Answer 5

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

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

Answer 6

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