Angular访问数字开头的对象属性报Parser Error如何解决？

该报错符合JavaScript基础语法规则：JS 中标识符不允许以数字开头，因此使用点运算符.24hVolume访问属性属于语法错误，Angular模板解析器也会遵循该规则抛出解析错误。

最优解决方案 #

不需要修改原数据的键名，直接改用方括号属性访问语法即可，将数字开头的属性名用字符串包裹后放在[]内访问。

修改后的对应代码如下：

<tbody *ngFor="let coin of cryptoCoins; let i = index">
  <tr>
    <th>{{ i + 1 }}</th>
    <td>
      <img
        height="32"
        width="32"
        src="{{ coin.iconUrl }}"
        alt="{{ coin.name }}"
      />
    </td>
    <td>{{ coin.name }}</td>
    <td>{{ coin.symbol }}</td>
    <td>{{ coin.price }}</td>
    <td>{{ coin.marketCap }}</td>
    <!-- 改用方括号语法访问数字开头的属性 -->
    <td>{{ coin['24hVolume'] }}</td>
  </tr>
</tbody>

可选替代方案 #

如果项目中有多处需要用到该属性，也可以在请求拿到接口返回数据时，统一遍历数组做键名转换，把24hVolume重命名为合法标识符格式比如volume24h。但该方案需要额外处理数据，性价比低于直接使用方括号语法，非特殊场景不推荐。

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