Angular 2 pipe, который преобразует объект JSON в довольно печатный JSON

Попытка написать трубу Angular 2, которая возьмет строку объекта JSON и вернет ее довольно напечатанную/отформатированную для отображения пользователю.

Например, это займет следующее:

{ "id": 1, "число": "K3483483344", "state": "CA", "active": true }

И возвратите то, что выглядит так, когда оно отображается в HTML:

Итак, на мой взгляд, я мог бы что-то вроде:

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

Ответ 1

Я хотел бы добавить еще более простой способ сделать это, используя встроенный json pipe:

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

Таким образом, форматирование сохраняется.

Ответ 2

Я бы создал для этого настраиваемый канал:

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

и использовать его следующим образом:

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

Смотрите этот plunkr: https://plnkr.co/edit/WbywRZTrpBoX3UsROYuS?p=preview.