Angular 7 Material Table动态表头与单元格数据适配问题求助

我来帮你搞定这个需求！其实把API返回的数据转换成你要的表格格式，拆解成三个核心步骤就很清晰了——先搞定动态表头，再按年份分组数据，最后把数据和表头对应填充。下面用JavaScript来给你演示完整的实现逻辑：

步骤1：准备原始数据 #

首先我们先把API返回的数组存起来：

const apiData = [
  { "year": 2019, "type": "Salaries", "value": 100 },
  { "year": 2019, "type": "Projects", "value": 78 },
  { "year": 2018, "type": "Projects", "value": 500 },
  { "year": 2018, "type": "Others", "value": 500 },
];

步骤2：生成动态表头 #

我们需要先提取所有唯一的类型字段，作为表格的列（除了固定的Year列）：

// 用Set去重，提取所有不重复的type
const uniqueTypes = [...new Set(apiData.map(item => item.type))];
// 组合成完整的表头数组
const tableHeaders = ['Year', ...uniqueTypes];

这样不管后续API新增什么类型（比如"Bonuses"），表头都会自动更新，不用手动改代码。

步骤3：按年份分组数据 #

接下来把同一年份的所有类型数据整合到一起，方便后续填充：

// 用reduce方法按年份分组，每个年份对应一个存储类型和数值的对象
const groupedByYear = apiData.reduce((acc, item) => {
  // 如果当前年份还没在分组对象里，先初始化一个空对象
  if (!acc[item.year]) {
    acc[item.year] = {};
  }
  // 把当前类型的数值存到对应年份的对象里
  acc[item.year][item.type] = item.value;
  return acc;
}, {});

// 把分组后的对象转换成数组，还可以按年份倒序排序（可选）
const yearRows = Object.entries(groupedByYear).sort(([yearA], [yearB]) => yearB - yearA);

步骤4：填充表格行数据 #

现在我们可以把分组好的数据和表头对应起来，没有对应类型的数值就填空字符串：

// 遍历每个年份，生成对应表头的行数据
const tableRows = yearRows.map(([year, typeValues]) => {
  // 对每个表头类型，取对应数值，没有就返回空字符串
  return [year, ...uniqueTypes.map(type => typeValues[type] || '')];
});

步骤5：渲染成表格（可选） #

如果是前端项目，我们可以把这些数据转换成HTML表格：

function renderTable(headers, rows) {
  // 生成表头单元格
  const headerCells = headers.map(header => `<th>${header}</th>`).join('');
  const headerRow = `<tr>${headerCells}</tr>`;
  
  // 生成内容单元格
  const contentRows = rows.map(row => {
    const cells = row.map(cell => `<td>${cell}</td>`).join('');
    return `<tr>${cells}</tr>`;
  }).join('');
  
  // 返回完整的表格HTML
  return `<table border="1" cellpadding="8" cellspacing="0">${headerRow}${contentRows}</table>`;
}

// 生成表格并插入到页面中
document.body.innerHTML = renderTable(tableHeaders, tableRows);

运行这段代码后，你就能得到和你需求完全一致的表格啦！这个方案的好处是完全动态的，不管API返回的年份和类型怎么变，都能自动适配生成对应的表格。

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