Angular中如何格式化显示JSON数据并保留换行？

问题场景 #

后端返回的test.json字段是包含换行的JSON字符串，直接在页面显示、用Angular的json管道，或者解析成对象后显示，都没法得到带换行的结构化样式。

具体解决步骤 #

1. 编写格式化方法
   在组件类中添加方法，先解析JSON字符串，再转成带缩进和换行的格式化字符串：

formatJson(str: string): string {
  try {
    const parsedObj = JSON.parse(str);
    // 第二个参数为null表示不过滤属性，第三个参数2表示缩进2个空格
    return JSON.stringify(parsedObj, null, 2);
  } catch (error) {
    // 解析失败时返回原字符串，避免页面报错
    return str;
  }
}

2. 页面中处理换行显示
   HTML默认会忽略换行和多余空格，所以需要用以下方式确保样式生效：

• 方式一：使用<pre>标签
  <pre>标签会保留文本中的换行和缩进，直接包裹格式化后的内容：

<td>{{ test.name }}</td>
<td>
  <pre>{{ formatJson(test.json) }}</pre>
</td>

• 方式二：自定义CSS样式
  如果不想用<pre>标签，可以给目标元素添加CSS样式来保留空白：

<td>{{ test.name }}</td>
<td class="formatted-json">{{ formatJson(test.json) }}</td>

对应的CSS：

.formatted-json {
  white-space: pre-wrap; /* 保留换行，超出宽度时自动换行 */
  font-family: monospace; /* 使用等宽字体，排版更整齐 */
}

之前问题的原因说明 #

• 用{{test.json|json}}显示异常：因为test.json本身是字符串，json管道会把这个字符串转成JSON格式的字符串，导致显示带转义的换行符（比如\r\n）。
• 解析后显示[object Object]：Angular插值表达式会把对象默认转为字符串，直接显示[object Object]，需要先转成格式化的字符串再输出。
• 控制台输出正常但页面无换行：HTML默认会合并连续空白，必须通过<pre>标签或white-space样式强制保留换行和缩进。

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