Angular 2 Pipe, die JSON-Objekte in hübsch gedruckte JSON-Objekte umwandelt
Es wurde versucht, eine Angular 2-Pipe zu schreiben, die eine JSON-Objektzeichenfolge aufnimmt und sie hübsch gedruckt/formatiert zurückgibt, um sie dem Benutzer anzuzeigen.
Zum Beispiel würde es das dauern:
{"id": 1, "number": "K3483483344", "state": "CA", "active": true}
Und geben Sie etwas zurück, das in HTML so aussieht:
Aus meiner Sicht könnte ich also Folgendes haben:
<td> {{ record.jsonData | prettyprint }} </td>
Ich möchte eine noch einfachere Möglichkeit hinzufügen, dies mit der eingebauten json -Pipe zu tun:
<pre>{{data | json}}</pre>
Auf diese Weise bleibt die Formatierung erhalten.
Ich würde eine benutzerdefinierte Pipe dafür erstellen:
@Pipe({
name: 'prettyprint'
})
export class PrettyPrintPipe implements PipeTransform {
transform(val) {
return JSON.stringify(val, null, 2)
.replace(' ', ' ')
.replace('\n', '<br/>');
}
}
und benutze es so:
@Component({
selector: 'my-app',
template: `
<div [innerHTML]="obj | prettyprint"></div>
`,
pipes: [ PrettyPrintPipe ]
})
export class AppComponent {
obj = {
test: 'testttt',
name: 'nameeee'
}
}
Siehe diesen Stackblitz: https://stackblitz.com/edit/angular-prettyprint