Angular读取Excel含空格列名无法在HTML渲染的解决方法咨询

不需要修改Excel列名的话，有两种可行方案：

方案1：HTML模板中使用方括号语法访问属性 #

JavaScript/TypeScript中，当对象属性名包含空格、特殊字符时，无法通过.点语法访问，必须改用方括号+字符串的形式。直接在HTML模板里调整访问方式即可：

示例HTML代码：

<div *ngFor="let pricedata of ExcelData">
  <p>物料描述：{{ pricedata['(i) Autodesk Material Description'] }}</p>
  <p>SAP物料描述：{{ pricedata['(ii) Autodesk SAP Material Description'] }}</p>
</div>

这种方法无需修改TypeScript代码，直接适配原始的JSON结构，适合列名不多的场景。

方案2：TypeScript中转换JSON对象的键名 #

如果觉得HTML里的方括号写法不够简洁，可以在读取Excel后，主动将含空格的列名转换成合法的标识符（如下划线分隔或驼峰式），后续HTML就能用点语法访问。

修改你的ReadExcel方法：

fileReader.onload = (e) => {
  var workBook = XLSX.read(fileReader.result, {type:'binary'});
  var SheetNames = workBook.SheetNames;
  const rawExcelData = XLSX.utils.sheet_to_json(workBook.Sheets[SheetNames[0]]);

  // 转换每个对象的键名：去除前缀括号、空格转下划线
  this.ExcelData = rawExcelData.map(item => {
    const formattedItem: any = {};
    Object.keys(item).forEach(originalKey => {
      // 处理规则：去掉开头的(i)/(ii)前缀，空格替换为下划线
      const cleanedKey = originalKey.replace(/^\(i+\)\s*/, '').replace(/\s+/g, '_');
      formattedItem[cleanedKey] = item[originalKey];
    });
    return formattedItem;
  });

  console.log(this.ExcelData);
}

处理后，HTML里就可以用更简洁的点语法：

<div *ngFor="let pricedata of ExcelData">
  <p>物料描述：{{ pricedata.Autodesk_Material_Description }}</p>
  <p>SAP物料描述：{{ pricedata.Autodesk_SAP_Material_Description }}</p>
</div>

如果偏好驼峰式命名，也可以把键名转换逻辑改成：

const cleanedKey = originalKey
  .replace(/^\(i+\)\s*/, '') // 移除前缀
  .replace(/\s+(.)/g, (_, char) => char.toUpperCase()) // 空格后字符大写
  .replace(/^\w/, c => c.toLowerCase()); // 首字母小写

此时HTML访问方式为{{ pricedata.autodeskMaterialDescription }}。

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