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

Answer 2

您的页面是否需要打印成那种格式，或者您只想自己预览（通常，我使用 PrettyJSON 来预览）？

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

Angular prettify data with pipe or other way

typescript

angular

angular8