Ống Angular 2 chuyển đổi đối tượng JSON thành JSON được in đẹp mắt

Cố gắng viết một đường ống Angular 2 sẽ lấy một chuỗi đối tượng JSON và trả về nó được in / định dạng đẹp để hiển thị cho người dùng.

Ví dụ, nó sẽ là:

{"id": 1, "number": "K3483483344", "state": "CA", "active": true}

Và trả lại thứ gì đó trông giống như thế này khi được hiển thị trong HTML:

Vì vậy, theo quan điểm của tôi, tôi có thể có một cái gì đó như:

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

Tôi muốn thêm một cách đơn giản hơn để thực hiện việc này, sử dụng jsonđường ống tích hợp:

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

Bằng cách này, định dạng được giữ nguyên.

Tôi sẽ tạo một đường ống tùy chỉnh cho việc này:

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

và sử dụng nó theo cách này:

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

Xem stackblitz này: https://stackblitz.com/edit/angular-prettyprint

Vì đây là kết quả đầu tiên trên google, hãy để tôi thêm một bản tóm tắt nhanh:

• nếu bạn chỉ cần in JSON mà không cần định dạng thích hợp, jsonđường ống tích hợp do Shane Hsu đề xuất hoạt động hoàn hảo:<pre>{{data | json}}</pre>

• tuy nhiên, nếu bạn muốn có một đầu ra khác, bạn sẽ cần tạo đường ống của riêng mình như Thierry Templier đã đề xuất:

  1. ng g generate pipe prettyjson
  2. trong prettyjson.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'prettyjson'
})
export class PrettyjsonPipe implements PipeTransform {

  transform(value: any, ...args: any[]): any {
    return JSON.stringify(value, null, 2)
    .replace(/ /g, ' ') // note the usage of `/ /g` instead of `' '` in order to replace all occurences
    .replace(/\n/g, '<br/>'); // same here
  }

}

3. Cuối cùng, và vì chúng tôi trả về nội dung HTML, nên đường ống phải được sử dụng bên trong một innerHTMLhàm:

<div [innerHTML]="data | prettyjson"></div>

vì biến của tôi được liên kết hai chiều với ngModel, tôi không thể thực hiện nó trên html. Tôi đã sử dụng ở phía thành phần JSON.stringify(displayValue, null, 2) và nó đã thực hiện công việc.