Javascript Angular 2美化JSON管道过滤器

奇怪的是，我试图以非常格式化的方式打印我的JSON，但是我的JSON总是返回

\

，并且打印得不漂亮

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

我有这个解决方案，它可以在plnkr上工作，但不能在我的实际应用程序上工作。下图是打印的JSON，与我在plnkr上看到的类似

有人能解释为什么会发生这种情况吗

Plnkr样本：

代码管道：

    @Pipe({
  name: 'prettyprint'
})
export class PrettyPrintPipe {
   transform(val) {
    if(typeof(val) == "undefined" || typeof(val) == null) return ''; //check value before process it.
    return JSON.stringify(val, null, 2)
      .replace(/ /g, ' ')
      .replace(/\\n/g, '<br>');
  }
}

JS对象，我需要

JSON.stingify

这两个对象，这样我就可以

concat

或在父对象中添加

childObj

因此，

this.output

是最终的JSON结构，我认为它已经是一个JSON字符串，添加管道过滤器会增加斜线。当我尝试

JSON.parse（this.output）

时，它在位置214处给出了一个JSON中的

意外标记o的错误

这是一个CSS解决方案：

code {
   white-space: pre; 
}

我创建了一个可工作的plunker：

将
div标记更改为
之前的
标记

<pre [innerHTML]="x | prettyprint"></pre>



演示：Angular 2有一个用于格式化JSON数据的内置管道。只需将HTML模板更改为：

请参阅：
还是一样，我更新了plnkr并打印了JSON格式的
{{x|prettyprint}
，现在它添加了很多东西。为什么需要替换函数？好的想法是将JSON放在文本区域中，但如果它位于
pre
标记中，则它根本不可编辑。我认为做一个管道过滤器会把它打印得很漂亮。你首先应该这么说。是的，对不起，我只是想先解决过滤器问题，但这就是我的想法。尽管如此，我还是更新了plnkr并打印了JSON，比如
{x|prettyprint}
，现在它添加了很多东西。不过，我计划将这个JSON放在一个文本区域中，这样它就可以编辑了，所以如果我把它放在
pre
标记中，用户就不能编辑它了。使用
textarea
和
pre
tagInfact而不使用pretag，它也可以工作！是的，看起来很像，但我实际的JSON输出仍然是adds``太奇怪了。当我将
对象
转换为
JSON时，看起来是这样的。stringify
它添加了斜杠，这方面有什么工作吗？是的，我见过一个，但是每次我在结构中添加管道过滤器
json
时，它总是添加一个``符号。它添加斜杠我认为是因为它的
json.stringify
已经是一个字符串json，这就是过滤器所做的。是的，如果将JSON字符串字符串化，则会得到斜杠。您可以在字符串上调用
JSON.parse（）
，然后将其通过JSON管道。请参阅我问题中的编辑，我尝试了
JSON.parse
这个
输出
，但它不断给我错误，即JSON中214位置处的
意外标记o，除非它已经是
对象
，因此，如果是这样，那么JSON管道不应该添加斜杠，因为它会转换回
String
？只需将\替换为emoty String即可
<pre>{{ x | json }}</pre>

@Pipe({name: 'json', pure: false})
export class JsonPipe implements PipeTransform {
  transform(value: any): string { return JSON.stringify(value, null, 2); }
}