พยายามเขียนไปป์ Angular 2 ที่จะใช้สตริงอ็อบเจ็กต์ JSON และส่งคืนรูปแบบ / รูปแบบที่สวยงามเพื่อแสดงต่อผู้ใช้
ตัวอย่างเช่นจะใช้สิ่งนี้:
{"id": 1, "number": "K3483483344", "state": "CA", "active": true}
และส่งคืนสิ่งที่มีลักษณะเช่นนี้เมื่อแสดงใน HTML:
ดังนั้นในมุมมองของฉันฉันสามารถมีบางอย่างเช่น:
<td> {{ record.jsonData | prettyprint }} </td>
คำตอบ:
ฉันต้องการเพิ่มวิธีที่ง่ายกว่านี้โดยใช้jsonท่อในตัว:
<pre>{{data | json}}</pre>
วิธีนี้การจัดรูปแบบจะถูกเก็บรักษาไว้
<pre>และจะไม่ทำงานกับเช่น<p>, <span>ฯลฯ
ฉันจะสร้างท่อที่กำหนดเองสำหรับสิ่งนี้:
@Pipe({
name: 'prettyprint'
})
export class PrettyPrintPipe implements PipeTransform {
transform(val) {
return JSON.stringify(val, null, 2)
.replace(' ', ' ')
.replace('\n', '<br/>');
}
}
และใช้วิธีนี้:
@Component({
selector: 'my-app',
template: `
<div [innerHTML]="obj | prettyprint"></div>
`,
pipes: [ PrettyPrintPipe ]
})
export class AppComponent {
obj = {
test: 'testttt',
name: 'nameeee'
}
}
ดู stackblitz นี้: https://stackblitz.com/edit/angular-prettyprint
<div>{{obj | prettyprint }}</div> แต่มันได้ผล!
jsonท่อในตัวดังที่มีใน Angular 1
implements PipeTransformหลังexport class PrettyPrintPipe
เนื่องจากนี่เป็นผลลัพธ์แรกใน Google ขอฉันเพิ่มผลสรุปสั้น ๆ :
หากคุณต้องการพิมพ์ JSON โดยไม่มีการจัดรูปแบบที่เหมาะสมjsonไปป์ในตัวที่แนะนำโดย Shane Hsu จะทำงานได้อย่างสมบูรณ์:<pre>{{data | json}}</pre>
อย่างไรก็ตามหากคุณต้องการได้ผลลัพธ์ที่แตกต่างออกไปคุณจะต้องสร้างท่อของคุณเองตามที่ Thierry Templier แนะนำ:
ng g generate pipe prettyjsonimport { 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
}
}
innerHTMLฟังก์ชัน:<div [innerHTML]="data | prettyjson"></div>
เนื่องจากตัวแปรของฉันเชื่อมโยงกับ ngModel สองทางฉันจึงไม่สามารถทำได้บน html ฉันใช้ในด้านส่วนประกอบJSON.stringify(displayValue, null, 2) และได้ผล