javascript - कोणीय 2 पाइप जो JSON ऑब्जेक्ट को सुंदर-मुद्रित JSON में बदल देता है




filter angular (2)

एक कोणीय 2 पाइप लिखने की कोशिश कर रहा है जो एक JSON ऑब्जेक्ट स्ट्रिंग लेगा और उपयोगकर्ता को प्रदर्शित करने के लिए इसे सुंदर-मुद्रित / स्वरूपित करेगा।

उदाहरण के लिए, यह इसे ले जाएगा:

{"आईडी": 1, "संख्या": "K3483483344", "राज्य": "सीए", "सक्रिय": सच}

और HTML में प्रदर्शित होने पर कुछ इस तरह दिखाई देता है:

इसलिए मेरे विचार में मैं कुछ ऐसा कर सकता था:

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

मैं इसके लिए एक कस्टम पाइप बनाऊंगा:

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

और इसे इस तरह से उपयोग करें:

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

इस स्टैकब्लिट्ज़ को देखें: https://stackblitz.com/edit/angular-prettyprint


मैं इसे करने के लिए और भी सरल तरीका जोड़ना चाहूंगा, बिल्ट-इन json पाइप का उपयोग करना:

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

इस तरह, स्वरूपण संरक्षित है।





pipe