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

我正在制作一个 AngularJS2应用程序的 beta 版本。我想在页面中显示一个对象的 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？

159653 次浏览
小开

如果你想在你的 web 应用程序中看到你的对象内部有什么，那么使用组件 HTML 模板中的 Json 烟斗，例如:

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

使用角度4.3.2测试和有效。

小开

有两种方法可以得到这些值:-

  1. 使用点符号(objec.property)访问对象的属性。
  2. 通过传入键值(例如 obj [“ property”))来访问对象的属性
小开 
<li *ngFor="let obj of myArray">\{\{obj | json}}</li>
小开

用新语法更新其他人的答案:

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

转储对象内容为 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>
小开

我们可以使用角管 Json

\{\{ jsonObject | json }}
小开

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

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

然后是模板

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

要遍历 JSON 对象: 在 Angluar 的(6.0.0 +)中，现在他们提供了管道 keyvalue:

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

也读一下

只显示 JSON

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

提交答案