Angular调用GET接口时如何访问数组对象中带空格的属性

方法1：模板直接用方括号访问（最简单，适合少次使用场景） #

JavaScript原生不支持点语法访问带空格/特殊字符的属性，必须用[]方括号包裹属性名字符串，Angular模板语法遵循同样规则：

1. 组件中先接收API返回的数组：

// 组件ts文件中
orderList: any[] = [];

// 调用GET接口的逻辑示例
this.http.get('你的接口地址').subscribe(res => {
  this.orderList = res as any[];
})

2. 列表模板直接通过方括号读取属性：

<!-- 组件html模板中 -->
<ul>
  <li *ngFor="let order of orderList">
    采购订单编号：{{ order['purchase order no.'] }}
  </li>
</ul>

方法2：提前做属性映射（推荐，适合多次使用场景） #

如果多处用到这个属性，可以在接口返回后直接把带空格的属性转成无空格的常规属性，后续使用更方便，也避免反复写长字符串：

// 接口返回后处理数组
this.http.get('你的接口地址').subscribe((res: any[]) => {
  this.orderList = res.map(item => {
    return {
      ...item,
      // 把带空格的属性值赋值给新的无空格属性
      purchaseOrderNo: item['purchase order no.']
    }
  })
})

处理后模板就可以直接用点语法访问：

<li *ngFor="let order of orderList">
  采购订单编号：{{ order.purchaseOrderNo }}
</li>

方法3：TypeScript类型适配 #

如果用了TS类型定义，可以直接在接口中声明带引号的属性，避免类型报错：

// 定义订单类型
interface Order {
  id: number;
  // 带空格的属性用引号包裹声明
  'purchase order no.': string;
  // 其他属性...
}

// 组件中声明数组时指定类型
orderList: Order[] = [];

注意：不要尝试在模板中用order.purchase order no.这种点语法访问带空格的属性，本身不符合JS语法规范，一定会报错。

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