如何在 codemirror 上显示 JSON？

【问题标题】：how to show JSON on codemirror?如何在 codemirror 上显示 JSON？
【发布时间】：2020-06-04 08:09:02
【问题描述】：

目前我正在使用ngx-codemirror - 代码镜像上的角度包装器。

在我的应用中

html 显示

<ngx-codemirror [(ngModel)]="data" [autoFocus]=true [options]="{lineNumbers: true,theme: 'material',mode: 'markdown'}"></ngx-codemirror>

如实展示

data='';
   json = {
        "title": "Type",
        "description": "A type of product",
        "type": "object"
  };

constructor(){
      this.data = JSON.stringify(this.json);
}

它在一行中正确显示了 json 文本，但我想以 json 格式而不是单行中的字符串显示它。

我该怎么做？

【问题讨论】：

标签： angular codemirror

【解决方案1】：

您可以在JSON.stringify() 方法中发送一个空白字符作为space 参数。试试下面的

控制器

data = '';
json = {
  "title": "Type",
  "description": "A type of product",
  "type": "object"
};

ngOnInit() {
  this.data = JSON.stringify(this.json, null, ' ');    // <-- string literal ' ' as `space` argument  
}

您还可以通过发送数字来修改缩进空间。例如。 JSON.stringify(this.json, null, 4) 表示缩进 4 个空格。

模板

<ngx-codemirror #codemirror
  [options]="codeMirrorOptions"
  [(ngModel)]="data"
  (ngModelChange)="setEditorContent($event)">
</ngx-codemirror>

工作示例：Stackblitz

【讨论】：