angular - 如何在 codemirror 上显示 JSON？

Question

目前我正在使用 ngx-codemirror - codemirror 上的 Angular 包装器。

在我的应用程序中

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 格式而不是字符串显示它。

我该怎么做？

Answer 1

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

Controller

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