Angular插值表达式如何引用名称含百分号%的变量

Angular模板插值表达式遵循JavaScript标识符命名规则，%是取余运算符，不属于合法标识符字符。直接写{{Wifi_%}}时，编译器会将其解析为Wifi % _（即变量Wifi对变量_做取余运算），语法解析完全错乱，最终抛出编译错误。Angular没有提供专门转义标识符特殊字符的插值语法，可通过以下两种方案适配场景：

• 方案1：组件层做字段别名映射（推荐）
  这是兼容性最好、最易维护的方案，不需要修改第三方原始字段，只需要在组件TS代码中，通过方括号属性访问语法取出特殊命名字段的值，赋值给组件上命名合法的属性即可：

  // 组件类代码
  export class DemoComponent {
    // 存储第三方返回的原始数据
    thirdPartySource: any;
    // 映射后命名合法的属性
    wifiValue: string | number;
  
    // 拉取第三方数据的逻辑
    async loadSourceData() {
      this.thirdPartySource = await fetchThirdPartyApi();
      // 取带%的特殊字段值
      this.wifiValue = this.thirdPartySource['Wifi_%'];
    }
  }
  

  模板中直接使用合法命名的属性插值即可，还可以顺手添加空值保护、管道格式化等逻辑：

  {{ wifiValue | number:'1.0-2' }}
  

• 方案2：模板内通过索引语法直接访问
  如果不想在TS层做映射，可以将第三方原始数据整体赋值给组件上一个命名合法的属性，在模板中通过方括号索引语法访问特殊key的属性：

  // 组件类中暴露原始数据
  export class DemoComponent {
    sourceData: any; // 直接把第三方返回的整个对象挂在这个属性上
  }
  

  模板写法：

  {{ sourceData['Wifi_%'] }}
  

注意：不要尝试用反斜杠等符号转义标识符里的%，Angular模板语法不支持标识符级别的特殊字符转义，这类写法依然会触发编译错误。

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