Angular 2美化JSON管道过滤器

Question

奇怪我正在尝试以相当格式化的方式打印我的JSON，但是我的JSON继续使用\\而不是打印漂亮。

我有这个解决方案适用于plnkr但不适用于我的实际应用程序。 下面的图片是打印的JSON，类似于我在plnkr上的内容。

任何人都可以解释为什么会这样吗？

Plnkr示例： https ：//plnkr.co/edit/ZqOXS30XPTu9ponWFdgZ ？ p = preview

代码管道：

    @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 。

var parentJSONObj = JSON.stringify(object)
var childObj = JSON.stringify(object) // in a diferent schema 
this.output = parentJSONObj.replace(replaceObj, childObj) // and need to replace a property inside childObj

所以this.output是我认为已经是JSON字符串的最终JSON结构，添加管道过滤器会添加斜杠。 当我尝试JSON.parse(this.output)它Unexpected token o in JSON at position 214给出了一个Unexpected token o in JSON at position 214的错误

Answer 1

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

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

您的自定义管道只是复制本机功能。

以下是JSON管道的完整源代码：

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

请参阅： https ： //github.com/angular/angular/blob/master/modules/@angular/common/src/pipes/json_pipe.ts

Answer 2

将div标签更改为pre标签，

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

演示： https ： //plnkr.co/edit/bpisrwlf2aFZFteapwY1？ p = preview

Answer 3

这是一个CSS解决方案：

code {
   white-space: pre; 
}

我创建了一个工作的plunker：

https://plnkr.co/edit/wULnv7b3tsKrML6hslWu?p=preview