在Angular应用开发中，处理JSON对象并展示其原始结构是常见需求，比如调试接口返回数据、展示配置信息或者呈现动态生成的数据结构，都需要完整保留JSON的层级和格式。
基础展示方式：使用json管道
Angular内置了json管道，可以直接将JSON对象转换为格式化的字符串展示，这是最简单直接的方式，适合静态或者不需要额外处理的JSON展示场景。
首先在组件的TS文件中定义需要展示的JSON对象：
// 组件TS文件
import { Component } from '@angular/core';
@Component({
selector: 'app-json-display',
templateUrl: './json-display.component.html',
styleUrls: ['./json-display.component.css']
})
export class JsonDisplayComponent {
// 定义一个嵌套的JSON对象
rawJson = {
name: '测试数据',
version: 1.0,
features: ['动态生成', '原始展示', '格式保留'],
config: {
timeout: 3000,
retry: 2
}
};
}
然后在对应的HTML模板中使用json管道展示：
<!-- 组件HTML模板 -->
<div class="json-container">
<h3>原始JSON展示</h3>
<pre>{{ rawJson | json }}</pre>
</div>
这里使用<pre>标签是为了保留json管道输出字符串的换行和缩进格式，让展示效果更符合原始JSON的层级结构。
动态生成JSON并实时展示
如果JSON对象是动态生成的，比如根据用户输入或者接口返回实时更新，只需要更新组件中的JSON对象属性，Angular的变更检测机制会自动更新页面展示内容。
我们可以在组件中添加一个方法动态修改JSON对象：
// 组件TS文件中添加方法
updateJson() {
// 动态修改JSON对象的内容
this.rawJson = {
...this.rawJson,
updateTime: new Date().toLocaleString(),
features: [...this.rawJson.features, '动态更新']
};
}
在模板中添加一个按钮触发更新：
<!-- 组件HTML模板中添加按钮 --> <button (click)="updateJson()">动态更新JSON</button>
点击按钮后，页面上的JSON展示内容会实时更新，并且依然保持正确的格式化结构。
自定义展示样式优化
默认的json管道输出样式比较基础，我们可以通过自定义CSS来优化展示效果，比如添加语法高亮、调整字体和背景等。
在组件的CSS文件中添加样式：
/* 组件CSS文件 */
.json-container {
background-color: #f5f5f5;
padding: 16px;
border-radius: 4px;
overflow-x: auto;
}
.json-container pre {
font-family: 'Consolas', 'Monaco', monospace;
font-size: 14px;
line-height: 1.5;
margin: 0;
}
这样展示的JSON区域会有浅灰色背景，等宽字体显示，并且超出容器宽度时可以横向滚动，更适合查看较长的JSON内容。
注意事项
- json管道只能用于Angular模板中，不能直接在TS文件中使用，如果需要在TS中转换JSON为字符串，可以使用
JSON.stringify方法，第二个参数传入null，第三个参数传入缩进空格数，比如JSON.stringify(obj, null, 2)。 - 如果JSON对象中包含循环引用，json管道会抛出错误，这种情况下需要先处理循环引用问题再展示。
- 动态更新JSON对象时，尽量使用不可变数据的方式更新，比如使用扩展运算符或者
Object.assign，避免直接修改原对象属性导致变更检测不生效。
通过以上方法，就可以在Angular中轻松实现动态生成并展示原始JSON对象的需求，无论是静态数据还是动态更新的数据，都能完整保留JSON的原始结构和格式。