একটি কৌণিক 2 পাইপ লেখার চেষ্টা করছে যা একটি JSON অবজেক্ট স্ট্রিং নেবে এবং এটি ব্যবহারকারীর কাছে প্রদর্শন করতে সুন্দর-মুদ্রিত / ফর্ম্যাট করে।
উদাহরণস্বরূপ, এটি এটি গ্রহণ করবে:
id "আইডি": 1, "সংখ্যা": "কে 3483483344", "রাষ্ট্র": "সিএ", "সক্রিয়": সত্য}
এবং এইচটিএমএলে প্রদর্শিত হলে এর মতো দেখতে এমন কিছু ফিরে আসুন:
সুতরাং আমার দৃষ্টিতে আমার এমন কিছু থাকতে পারে:
<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'
}
}
এই স্ট্যাকব্লিটজ দেখুন: https://stackblitz.com/edit/angular- ব্যাখ্যা প্রিন্ট
<div>{{obj | prettyprint }}</div> তবে এটি কার্যকর হয়েছে!
jsonপাইপ রয়েছে, যেমনটি কৌনিক 1 তে রয়েছে
implements PipeTransformপরেexport class PrettyPrintPipe
গুগলে এটি প্রথম ফলাফল হিসাবে, আমাকে দ্রুত যোগ করতে দাও:
আপনার যদি যথাযথ বিন্যাস ছাড়াই JSON মুদ্রণের প্রয়োজন হয়, jsonশেন সুস দ্বারা প্রস্তাবিত বিল্ট -ইন পাইপটি পুরোপুরি কাজ করে:<pre>{{data | json}}</pre>
তবে, আপনি যদি অন্য কোনও আউটপুট পেতে চান তবে থিয়েরি টেম্প্লিয়ারের পরামর্শ অনুযায়ী আপনার নিজের পাইপ তৈরি করতে হবে:
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>