Question

我一直在寻找一种显示JSON的好方法，所有的答案都有一些解决方案，但是无论我尝试什么，它只会使它变成长行且没有格式。这些都是我尝试过的。

<div>{{ jsonValue | json }}</div>

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

<pre [innerHtml]="jsonValue"></pre>

import {PrettyJsonModule} from 'angular2-prettyjson'; <pre [innerHtml]="eligibilityView | prettyjson:3"></pre>

import {PrettyJsonModule} from 'angular2-prettyjson'; <pre>{{ eligibilityView | prettyjson:3 }}</pre>

从我看到的所有问题中，其中一个应该可以解决，但是它们都只是一行，没有格式。

Answer 1

我强烈建议您使用Monaco editor（由VS Code提供支持的Microsoft开源）。呈现复杂的JSON（包含数组和数组数组等的对象）变得很复杂。

PS：加载后有一些漂亮的打印回调-最初不是漂亮的打印

require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.8.3/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };

let proxy = URL.createObjectURL(new Blob([`
	self.MonacoEnvironment = {
		baseUrl: 'https://unpkg.com/monaco-editor@0.8.3/min/'
	};
	importScripts('https://unpkg.com/monaco-editor@0.8.3/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript' }));

require(["vs/editor/editor.main"], function () {
	let editor = monaco.editor.create(document.getElementById('container'), {
		value: [
			'function x() {',
			'\tconsole.log("Hello world!");',
			'}'
		].join('\n'),
		language: 'javascript',
		theme: 'vs-light' 
	});
	
	editor.addListener('didType', () => {
		console.log(editor.getValue());
	});
  
});

html, body, #container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<div id="container"></div>

以漂亮的格式显示JSON以显示HTML

1 个答案: