Essayer d'écrire un canal Angular 2 qui prendra une chaîne d'objet JSON et la retournera joliment imprimée/formatée pour l'afficher à l'utilisateur.
Par exemple, cela prendrait ceci:
{"id": 1, "numéro": "K3483483344", "état": "CA", "actif": vrai}
Et retourne quelque chose qui ressemble à ceci lorsqu'il est affiché en HTML:
Donc, à mon avis, je pourrais avoir quelque chose comme:
<td> {{ record.jsonData | prettyprint }} </td>
J'aimerais ajouter un moyen encore plus simple de le faire, en utilisant le tube json
intégré:
<pre>{{data | json}}</pre>
De cette façon, le formatage est préservé.
Je créerais un tuyau personnalisé pour ceci:
@Pipe({
name: 'prettyprint'
})
export class PrettyPrintPipe implements PipeTransform {
transform(val) {
return JSON.stringify(val, null, 2)
.replace(' ', ' ')
.replace('\n', '<br/>');
}
}
et l'utiliser de cette façon:
@Component({
selector: 'my-app',
template: `
<div [innerHTML]="obj | prettyprint"></div>
`,
pipes: [ PrettyPrintPipe ]
})
export class AppComponent {
obj = {
test: 'testttt',
name: 'nameeee'
}
}
Voir ce stackblitz: https://stackblitz.com/edit/angular-prettyprint