Angolare 2 pipe che trasforma l'oggetto JSON in JSON piuttosto stampato

Question

Provare a scrivere una pipe Angular 2 che prenderà una stringa di oggetto JSON e la restituirà piuttosto stampata/formattata per la visualizzazione all'utente.

Per esempio, ci vorrebbe questo:

{ "id": 1, "numero": "K3483483344", "stato" : "CA", "attivo": true }

E restituire qualcosa che assomiglia a questo quando visualizzato in HTML:

Quindi a mio avviso ho potuto avere qualcosa di simile:

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

Answer 1

Vorrei aggiungere un modo ancora più semplice per fare questo, utilizzando il built-in json pipe:

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

In questo modo, la formattazione viene mantenuta.

Answer 2

vorrei creare un tubo personalizzato per questo:

@Pipe({ 
    name: 'prettyprint' 
}) 
export class PrettyPrintPipe implements PipeTransform { 
    transform(val) { 
    return JSON.stringify(val, null, 2) 
     .replace(' ', ' ') 
     .replace('\n', '<br/>'); 
    } 
} 

e usarlo in questo modo:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div [innerHTML]="obj | prettyprint"></div> 
    `, 
    pipes: [ PrettyPrintPipe ] 
}) 
export class AppComponent { 
    obj = { 
    test: 'testttt', 
    name: 'nameeee' 
    } 
} 

Vai a questa plunkr: https://plnkr.co/edit/WbywRZTrpBoX3UsROYuS?p=preview.