Angular中如何访问含点、双冒号等特殊字符的JSON字段值

问题根因 #

JavaScript 中使用.运算符访问对象属性时，要求属性名必须是合法的标识符：不能包含.、:、空格等特殊字符，也不能以数字开头。你遇到的字段名包含.和::符号，不符合标识符规范，因此无法用点运算符直接访问。同时注意你给出的示例中data是数组类型，访问时需要先指定数组下标，不要漏写fieldData层级。

正确访问方式 #

使用方括号[]语法访问即可，将完整的属性名字符串放入方括号中即可匹配到对应字段：

1. TypeScript 业务代码中写法 #

// 获取 article.text.value 字段值
const textValue = data[0].fieldData['article.text.value'];
// 获取 article.master::articlename 字段值
const articleName = data[0].fieldData['article.master::articlename'];

2. Angular 模板HTML中写法 #

<!-- 插值渲染 -->
<p>文本内容：{{ data[0].fieldData['article.text.value'] }}</p>
<p>文章名称：{{ data[0].fieldData['article.master::articlename'] }}</p>

<!-- 属性绑定 -->
<div [title]="data[0].fieldData['article.master::articlename']"></div>

拓展说明 #

如果属性名是动态存储在变量中的，直接把变量放入方括号即可，无需加引号：

const dynamicKey = 'article.text.value';
const dynamicValue = data[0].fieldData[dynamicKey];

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