如何使用 Angular 创建一个 json 对象并使用 html 显示它？答案

【问题标题】：How can I create a json object using Angular and display it using html?如何使用 Angular 创建一个 json 对象并使用 html 显示它？
【发布时间】：2018-03-31 17:23:32
【问题描述】：

基本上我正在使用一个我一无所知的 json 对象，我不知道它的键，我不知道它的价值。我设法使用它并处理我想要的所有信息，最后我有一个数组（我需要一个数组才能做我想做的事），其中包含 json 中的所有键及其路径。有没有办法可以将它放回 json 并使用 html 显示？

【问题讨论】：

你试过什么？我们只知道您对问题的了解程度
嗯，我还在网上找答案，想办法解决

标签： html json angular typescript

【解决方案1】：

如果您不想使用 devTool 来显示您的 json 对象，您可以在模板中执行此操作：

<div>{{ yourObject | json}}</div>

【讨论】：

或者更好地将其包裹在 <pre></pre> 中，因为 json 过滤器将为您执行换行和缩进。

【解决方案2】：

第 1 步：
简单的 Javascript：const arrayAsJson = JSON.stringify(yourArray)

第 2 步：要显示数据，请按照 @Bougarfaoui El houcine 的答案以及 cmets 中提到的那样获得格式化输出：

<pre>{{ arrayAsJson | json }}</pre>

【讨论】：