Javascript 将 JSON 对象转换为漂亮打印的 JSON 的 Angular 2 管道
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37308420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 pipe that transforms JSON object to pretty-printed JSON
提问by Derek
Trying to write an Angular 2 pipe that will take a JSON object string and return it pretty-printed/formatted to display to the user.
尝试编写一个 Angular 2 管道，该管道将接受一个 JSON 对象字符串并将其返回打印/格式化以显示给用户。
For example, it would take this:
例如，它将采用：
{ "id": 1, "number": "K3483483344", "state": "CA", "active": true }
{ "id": 1, "number": "K3483483344", "state": "CA", "active": true }
And return something that looks like this when displayed in HTML:
并在 HTML 中显示时返回如下所示的内容：
So in my view I could have something like:
所以在我看来，我可以有类似的东西：
<td> {{ record.jsonData | prettyprint }} </td>
回答by Shane Hsu
I would like to add an even simpler way to do this, using the built-in jsonpipe:
我想添加一种更简单的方法来做到这一点，使用内置json管道：
<pre>{{data | json}}</pre>
This way, the formatting is preserved.
这样，格式被保留。
回答by Thierry Templier
I would create a custom pipe for this:
我会为此创建一个自定义管道：
@Pipe({
name: 'prettyprint'
})
export class PrettyPrintPipe implements PipeTransform {
transform(val) {
return JSON.stringify(val, null, 2)
.replace(' ', ' ')
.replace('\n', '<br/>');
}
}
and use it this way:
并以这种方式使用它：
@Component({
selector: 'my-app',
template: `
<div [innerHTML]="obj | prettyprint"></div>
`,
pipes: [ PrettyPrintPipe ]
})
export class AppComponent {
obj = {
test: 'testttt',
name: 'nameeee'
}
}
See this stackblitz: https://stackblitz.com/edit/angular-prettyprint
请参阅此堆栈闪电战：https://stackblitz.com/edit/angular-prettyprint
回答by Dlacreme
As this is the first result on google, let me add a quick sum up:
由于这是谷歌上的第一个结果，让我快速总结一下：
if you only need to print JSON without proper formatting, the build-in
jsonpipe suggested by Shane Hsu works perfectly:<pre>{{data | json}}</pre>however, if you want to have a different output, you will need to create your own pipe as Thierry Templier suggested:
ng g generate pipe prettyjson- in prettyjson.pipe.ts:
如果您只需要在没有正确格式的情况下打印 JSON
json，Shane Hsu 建议的内置管道可以完美运行：<pre>{{data | json}}</pre>但是，如果您想要不同的输出，则需要按照 Thierry Templier 的建议创建自己的管道：
ng g generate pipe prettyjson- 在prettyjson.pipe.ts 中：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'prettyjson'
})
export class PrettyjsonPipe implements PipeTransform {
transform(value: any, ...args: any[]): any {
return JSON.stringify(value, null, 2)
.replace(/ /g, ' ') // note the usage of `/ /g` instead of `' '` in order to replace all occurences
.replace(/\n/g, '<br/>'); // same here
}
}
- Finally, and because we return HTML content, the pipe must be used inside an
innerHTMLfunction:
- 最后，因为我们返回 HTML 内容，所以必须在
innerHTML函数内部使用管道：
<div [innerHTML]="data | prettyjson"></div>
回答by Feng Zhang
since my variable is two way binded with ngModel, I could not do it on html. I used on component side JSON.stringify(displayValue, null, 2)and it did the job.
由于我的变量是与 ngModel 以两种方式绑定的，因此我无法在 html 上执行此操作。我在组件端使用JSON.stringify(displayValue, null, 2)，它完成了工作。
