각도 2 prettify JSON 파이프 필터

Question

이상한 꽤 형식화 된 방식으로 내 JSON 인쇄하려면 노력하고있어 내 JSON \ 함께 반환하고 꽤 인쇄되지 않는 유지합니다.

나는이 솔루션을 plnkr에서 사용할 수 있지만 실제 응용 프로그램에서는 사용할 수 없습니다. 아래 이미지는 plnkr에있는 것과 비슷한 JSON 인쇄물입니다.

왜 이런 일이 일어나고있는가요?

Plnkr 샘플 : https://plnkr.co/edit/ZqOXS30XPTu9ponWFdgZ?p=preview

코드 파이프 :

@Pipe({ 
    name: 'prettyprint' 
}) 
export class PrettyPrintPipe { 
    transform(val) { 
    if(typeof(val) == "undefined" || typeof(val) == null) return ''; //check value before process it. 
    return JSON.stringify(val, null, 2) 
     .replace(/ /g, ' ') 
     .replace(/\\n/g, '<br>'); 
    } 
} 

JS 개체, 나는 concat 내가 할 수 있도록 두 개체를 JSON.stingify 또는 부모 내부의 childObj를 추가해야합니다.

var parentJSONObj = JSON.stringify(object) 
var childObj = JSON.stringify(object) // in a diferent schema 
this.output = parentJSONObj.replace(replaceObj, childObj) // and need to replace a property inside childObj 

정도로 this.output 파이프 필터 슬래시 추가 제공 추가 내가 이미 JSON 문자열 생각 최종 JSON 구조이다. 내가 JSON.parse(this.output)를하려고하면 그것은 나에게 CSS 솔루션을 Unexpected token o in JSON at position 214

Answer 1

이의 오류입니다 제공 : 나는 작업 plunker 만들어

code { 
    white-space: pre; 
} 

:

https://plnkr.co/edit/wULnv7b3tsKrML6hslWu?p=preview

Answer 2

변경을 div 태그 t O pre 태그

<pre [innerHTML]="x | prettyprint"></pre> 

DEMO : https://plnkr.co/edit/bpisrwlf2aFZFteapwY1?p=preview

Answer 3

2 코너에는 내장 JSON 데이터를 포맷하는 파이프. HTML 템플릿을 다음으로 변경하십시오.

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

사용자 정의 파이프는 단순히 기본 기능을 복제하는 것입니다. 다음은

는 JSON 파이프의 전체 소스입니다 :

@Pipe({name: 'json', pure: false}) 
export class JsonPipe implements PipeTransform { 
    transform(value: any): string { return JSON.stringify(value, null, 2); } 
} 

참조 : https://github.com/angular/angular/blob/master/modules/@angular/common/src/pipes/json_pipe.ts 아직도