在Angular模板中如何展示JSON等代码片段？

报错原因 #

Angular模板默认将{、}识别为插值表达式的边界符号，你直接在<pre>、<code>标签内写JSON结构时，Angular会尝试解析大括号内的内容作为插值语法，不符合解析规则就会触发模板解析错误。

可用解决方案 #

方案1：使用ngNonBindable指令（最适合纯静态代码展示） #

给包裹代码的标签添加ngNonBindable属性，即可告知Angular不需要解析该标签内部的任何内容，直接原样输出：

<pre ngNonBindable>
{ "bla":"bla" }
</pre>

该方案适合代码内容固定、不需要动态渲染的场景，无需修改代码内容本身。

方案2：转义大括号 #

将代码中的{替换为{{ '{' }}、}替换为{{ '}' }}，让Angular将大括号识别为普通文本输出：

<pre>
  {{ '{' }}"bla":"bla"{{ '}' }}
</pre>

方案3：动态渲染JSON内容（最适合动态数据展示） #

如果要展示的JSON是组件中的动态数据，可以直接借助Angular内置的json管道实现格式化输出：

1. 首先在组件类中定义对应的变量：

// 组件.ts文件中
export class YourComponent {
  demoJson = { bla: 'bla' };
}

2. 在模板中直接插值输出并使用json管道：

<pre>{{ demoJson | json }}</pre>

json管道会自动将对象转换为带缩进的格式化JSON字符串，不需要手动处理格式。

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