पर एक कोणीय 2 पाइप लिखने का प्रयास कर रहा है जो एक JSON ऑब्जेक्ट स्ट्रिंग लेगा और इसे उपयोगकर्ता को प्रदर्शित करने के लिए सुंदर-मुद्रित/स्वरूपित करेगा।कोणीय 2 पाइप जो JSON ऑब्जेक्ट को सुंदर मुद्रित JSON
उदाहरण के लिए, यह इस ले जाएगा:
{ "आईडी": 1, "संख्या": "K3483483344", "राज्य": "सीए", "सक्रिय": सच
और कुछ है कि इस तरह दिखता है जब एचटीएमएल में दिखाया गया है वापसी
तो मेरे विचार में मैं की तरह कुछ हो सकता था:
<td> {{ record.jsonData | prettyprint }} </td>
मैं इस के लिए एक कस्टम पाइप बनाने होगा:
@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'
}
}
इस देखें plunkr: https://plnkr.co/edit/WbywRZTrpBoX3UsROYuS?p=preview।
<pre>{{data | json}}</pre>
इस तरह, फ़ॉर्मेटिंग को संरक्षित रखा जाता है:
कार्य किया! मेरे पास एक जेसन स्ट्रिंग थी, एक जेसन ऑब्जेक्ट नहीं, इसलिए मुझे JSON.stringify को कॉल करने से पहले इस लाइन को जोड़ना पड़ा: var jsonObject = JSON.parse (jsonString); – Derek
अप्रत्याशित वाक्यविन्यास, मुझे उम्मीद है कि मानक पाइप का उपयोग करने की तरह अधिक उपयोग करें: '
जैसा कि @ शेन-एचएसयू बताता है, वहां एक अंतर्निहित 'जेसन' पाइप है, जैसा कि कोणीय में है 1. –
ऐसा लगता है कि आप एक कस्टम पाइप बनाना चाहते हैं। यहां कुछ दस्तावेज हैं: https://angular.io/docs/ts/latest/guide/pipes.html#!#custom-pipes। इसे आज़माएं और यदि आप मुद्दों में भाग लेते हैं तो अधिक विशिष्ट प्रश्न पोस्ट करने के लिए स्वतंत्र महसूस करें – danyamachine