wake-up-neo.net

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:

enter image description here

Aus meiner Sicht könnte ich also Folgendes haben:

<td> {{ record.jsonData | prettyprint }} </td>
71
Derek

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.

229
Shane Hsu

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(' ', '&nbsp;')
      .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

17