如何在Angular的HTML文件中实现JSON美观打印

你当前出现转义反斜杠的核心原因是item.auditData中的queryParams字段是序列化后的JSON字符串，不是原生JS对象，直接使用Angular内置json管道输出时，会把字符串内部的转义符原样保留，导致出现大量\。

方案1：组件侧预处理数据（更推荐，性能更好） #

在组件获取到item数据的位置，把嵌套的JSON字符串解析为对象：

// 拿到item数据后执行这段逻辑
if (item?.auditData?.queryParams) {
  // 把字符串格式的queryParams转为真正的对象
  item.auditData.queryParams = JSON.parse(item.auditData.queryParams);
}

处理完成后，原有HTML模板无需修改，直接使用即可输出无转义的格式化JSON：

<pre>{{ item['auditData'] | json }}</pre>

方案2：自定义解析管道（适合多场景复用） #

如果多个页面都需要处理这类嵌套JSON字符串的场景，可以封装全局自定义管道：

1. 新建json-parse.pipe.ts文件：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'jsonParse' })
export class JsonParsePipe implements PipeTransform {
  transform(value: string | object): object | string {
    if (typeof value === 'string') {
      try {
        return JSON.parse(value);
      } catch (e) {
        // 解析失败直接返回原值避免报错
        return value;
      }
    }
    return value;
  }
}

2. 将管道注册到对应模块的declarations数组中
3. 模板中组合使用管道即可：

<pre>{{ item.auditData | jsonParse | json }}</pre>

内容的提问来源于stack exchange，提问作者prasanth