Angular 8非Material UI表格如何通过JSON实现列重排？

要实现表头和表格内容的同步列重排，核心思路是让表格内容的渲染逻辑完全依赖表头数组的顺序，不再硬编码每个<td>的字段。以下是具体实现步骤：

1. 优化表头配置（可选但推荐） #

在你的tableHeaders中添加field字段，用来映射transactions数据对象中的属性名，让表头和数据的关联更清晰：

this.tableHeaders = [
  {
    id: 'first_name', 
    value: "Name",
    field: "firstName" // 对应transaction中的firstName属性
  },
  {
    id: 'reg_no', 
    value: "Reg No",
    field: "regNo" // 对应transaction中的regNo属性
  },
  {
    id: 'course_name', 
    value: "Course",
    field: "course" // 对应transaction中的course属性
  }
];

2. 修改表格模板，同步内容列顺序 #

将原来硬编码的<td>改为遍历tableHeaders数组，根据每个表头的field字段动态获取数据：

<table>
  <thead class="thead-light">
    <tr>
      <th *ngFor="let header of tableHeaders">
        {{ header.value }}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of transactions">
      <!-- 遍历表头数组，动态生成td -->
      <td *ngFor="let header of tableHeaders">
        {{ data[header.field] }}
      </td>
    </tr>
  </tbody>
</table>

3. 实现列重排逻辑 #

现在只要调整tableHeaders数组的顺序，表头和表格内容就会自动同步更新。例如，添加一个交换列的函数：

swapNameAndRegNoColumns() {
  // 交换数组中第0和第1项的位置
  [this.tableHeaders[0], this.tableHeaders[1]] = [this.tableHeaders[1], this.tableHeaders[0]];
}

在模板中添加触发按钮：

<button (click)="swapNameAndRegNoColumns()">交换姓名与学号列</button>

备选方案：不修改表头结构的实现 #

如果不想改动现有的tableHeaders结构，可以通过一个映射函数来关联表头ID和数据字段：

// 组件内定义映射函数
getFieldValue(transaction: any, headerId: string): any {
  const idFieldMap = {
    'first_name': 'firstName',
    'reg_no': 'regNo',
    'course_name': 'course'
  };
  return transaction[idFieldMap[headerId]];
}

模板中调用该函数：

<td *ngFor="let header of tableHeaders">
  {{ getFieldValue(data, header.id) }}
</td>

核心原理 #

通过让表格内容的渲染完全依赖tableHeaders数组的顺序和配置，只要维护这个数组的排序，Angular的变更检测机制会自动更新整个表格的列顺序，实现表头与内容的同步重排。

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