Angular中使用*ngFor按ID分组实现动态表格

1. 先对JSON数据按ID分组 #

首先用JavaScript把原始数据按ID归类，方便后续按组渲染：

// 示例JSON数据（替换成你的实际数据）
const rawData = [
  { id: 101, detail: "参数1" },
  { id: 101, detail: "参数2" },
  { id: 102, detail: "参数A" },
  { id: 101, detail: "参数3" }
];

// 按ID分组处理
const groupedById = rawData.reduce((groups, item) => {
  const key = item.id;
  if (!groups[key]) groups[key] = [];
  groups[key].push(item);
  return groups;
}, {});

2. 动态渲染分组表格 #

假设你的现有HTML表格结构如下：

<table border="1">
  <thead>
    <tr>
      <th>ID</th>
      <th>编号</th>
      <th>详情</th>
    </tr>
  </thead>
  <tbody id="tableBody"></tbody>
</table>

用以下代码完成动态渲染，实现ID分组跨行、1-5编号的效果：

const tbody = document.getElementById('tableBody');

// 遍历每个ID分组
Object.entries(groupedById).forEach(([id, items]) => {
  // 生成1到5的编号行
  for (let num = 1; num <= 5; num++) {
    const row = document.createElement('tr');
    
    // ID单元格：仅第一行显示ID并跨5行
    const idTd = document.createElement('td');
    if (num === 1) {
      idTd.textContent = id;
      idTd.rowSpan = 5;
    }
    row.appendChild(idTd);
    
    // 编号单元格
    const numTd = document.createElement('td');
    numTd.textContent = num;
    row.appendChild(numTd);
    
    // 详情单元格：对应位置有数据则显示，无则留空
    const detailTd = document.createElement('td');
    detailTd.textContent = items[num - 1]?.detail || '';
    row.appendChild(detailTd);
    
    tbody.appendChild(row);
  }
});

关键说明 #

• 利用rowSpan属性让ID单元格跨5行，视觉上形成分组效果，避免重复显示同一ID
• 循环1到5强制生成每组5行，确保编号完整；如果组内数据不足5条，对应行的详情栏留空
• 若不需要跨行显示ID，只需移除rowSpan相关逻辑，每行都写入ID即可

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