Ống góc 2 biến đổi đối tượng JSON thành JSON

Question

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

Ví dụ, nó sẽ thực hiện việc này:

{ "id": 1, "số": "K3483483344", "nhà nước": "CA", "hoạt động": true }

Và trở lại cái gì đó trông như thế này khi được hiển thị dưới dạng 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> 

Answer 1

Tôi muốn nói thêm một cách thậm chí đơn giản hơn để làm điều này, sử dụng được xây dựng trong json ống:

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

Bằng cách này, các định dạng được bảo tồn.

Answer 2

tôi sẽ tạo ra 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 này plunkr: https://plnkr.co/edit/WbywRZTrpBoX3UsROYuS?p=preview.