Angular 为 JSON 添加不同的样式

Question

从 BE 它返回一个 json 并显示它，但我想，例如， "type, includeDeactive, code etc..."是粗体和（其他）值，在斜体的冒号 (:) 之后。 例子：

body:   {   "**type**: {    **includeDeactive**: *false*,    **code**: *null*,    **address**: *null*,    **name**: *null*,    }

我已经使用<pre>标记格式化了 json，并使用数据绑定{{detail.body | json }} {{detail.body | json }} 。 这是我的 html：

<mat-label style="font-family: Roboto">
    <strong>Body</strong>:
    <span style="font-family: Roboto"> 
    <pre id="formatJson"> {{detail.body | json }} </pre>
    </span>
</mat-label>

这是我在 ts 中的 function：

  objBody: any;
  parsedObj: any;

   constructor(
      private dialogRef: MatDialogRef<DettaglioAuditComponent>,
      @Inject(MAT_DIALOG_DATA) public data,
      private auditService: AuditService,
    ) { }
    
    ngOnInit(): void {
      this.detail = {};
      this.auditService.getDetails(this.data.element).then(
        (value) => {
          this.detail = value;
          var objBody = JSON.stringify(this.detail.body);
          var parsedObj = JSON.parse(objBody);
            
          //objBody = objBody.replace('{"', '{"<b>'); - already tried but doesn't work!
          //objBody = objBody.replace('":', '</b>":');
          this.loading = false;
        },
        (error) => 
        });
    }

任何想法？ 提前致谢！

Answer 1

如果您出于专业目的需要它并且“只想让它工作”，请使用Highlightjs或等效库。 output 会很漂亮而且可读性很强：

如果你想用 Highlightjs 来做

你当然需要highlightJs。 您可以使用 npm 依赖ngx-highlight-js ，这将使您能够在 Angular 项目中使用 HighlightJs。

在 Angular 项目中，可以包含如下内容：

<textarea highlight-js ngNonBindable lang="javascript">
 // include your content here
</textarea>

• 您必须在<textarea>标记中包含内容（用于缩进保留）
• highlight-js当然是告诉 HighlightJs 完成工作的指令
• ngNonBindable阻止 Angular 尝试将 textArea 的内容解释为 Angular 代码
• lang="javascript" ：您可以选择指定语言以实现准确的着色
• 另外，不要忘记在必要时导入HighlightJsModule模块

如果你想自己做

（或了解事情是如何运作的）

您可以JSON.parse()字符串的内容，递归迭代给定的 object 键并从中生成 HTML 。

• 缩进和换行可以通过将生成的 html 放在<pre> pr <textarea>标签中来呈现
• Colors 可以通过将彩色元素放在专用的<span class="[...]">标签中来实现

在前面的例子中，HighlightJS 生成的 HTML 代码是：

<pre><code class="language-json hljs">[
  {
    <span class="hljs-attr">"title"</span>: <span class="hljs-string">"apples"</span>,
    <span class="hljs-attr">"count"</span>: [<span class="hljs-number">12000</span>, <span class="hljs-number">20000</span>],
    <span class="hljs-attr">"description"</span>: {<span class="hljs-attr">"text"</span>: <span class="hljs-string">"..."</span>, <span class="hljs-attr">"sensitive"</span>: <span class="hljs-literal">false</span>}
  },
  {
    <span class="hljs-attr">"title"</span>: <span class="hljs-string">"oranges"</span>,
    <span class="hljs-attr">"count"</span>: [<span class="hljs-number">17500</span>, <span class="hljs-literal">null</span>],
    <span class="hljs-attr">"description"</span>: {<span class="hljs-attr">"text"</span>: <span class="hljs-string">"..."</span>, <span class="hljs-attr">"sensitive"</span>: <span class="hljs-literal">false</span>}
  }
]
</code></pre>

相关代码：

• 使用JSON.parse(contentAsString)将内容转换为 object
• 使用Array.isArray(obj)检查给定属性是否为数组
• 使用Object.keys(obj)迭代 object 键