使用管道或其他方式 Angular 美化数据

Question

我正在使用 angular 8，我有一些数据当前显示在 div 上，如下所示:

{"Information":"Information one","Output":[{"address1":"someaddress"},{"address2":"someaddress"},{"address3":"someaddress"},{"address4":"someaddress"}]}

如您所见，它们都排成一行。

这是 .html 文件的样子:

<div><pre><code>{{ content }}</code></pre></div>

我试过这个:

<div><pre><code>{{ content | json }}</code></pre></div>

..但输出看起来像这样:

"{\"Information\":\"Information one\",\"Output\":[{\"address1\":\"someaddress\"},{\"address2\":\"someaddress\"},{\"address3\":\"someaddress\"},{\"address4\":\"someaddress\"}]}"

所以情况更糟。

我怎样才能使它看起来更像这样？

{
  "Information":"Information one",
  "Output":[
    {
      "address1":"someaddress"
    },
    {
      "address2":"someaddress"
    },
    {
      "address3":"someaddress"
    },
    {
      "address4":"someaddress"
    }
  ]
}

Answer 1

您可以使用 JSON.stringify实现这一目标。

在你的 component.ts 中添加这个函数:

prettify(jsonobj) {
   return JSON.stringify(jsonobj,null,'\t');
}

然后在您的模板中，而不是 <div><pre><code>{{ content }}</code></pre></div> ，使用这个:

<div><pre><code>{{ prettify(content) }}</code></pre></div>

工作 Stackblitz 演示:https://stackblitz.com/edit/angular-f9tdhu