如何编写函数将对象数组动态转换为表格列头并实现渲染

核心逻辑说明 #

你提供的数据结构分为两类字段：仅展示固定值的字段（如car）、同时展示新旧两个值的变更字段（如revisionDate），我们可以先统一生成列头配置，再对应生成行数据。

TS 逻辑代码 #

// 生成表格列头配置
getColumns(revisions: any[]): any[] {
  if (!revisions?.length) return [];
  const columns = [];
  // 取第一条数据的所有属性作为列的依据（默认所有行结构一致）
  const firstRow = revisions[0];
  Object.keys(firstRow).forEach(fieldKey => {
    const fieldConfig = firstRow[fieldKey];
    // 区分带新旧值的变更字段和普通字段
    if (fieldConfig.hasOwnProperty('oldValue') && fieldConfig.hasOwnProperty('newValue')) {
      // 旧值列
      columns.push({
        field: `${fieldKey}_old`,
        header: `${fieldConfig.header} (现有)`
      });
      // 新值列
      columns.push({
        field: `${fieldKey}_new`,
        header: `${fieldConfig.header} (新)`
      });
    } else {
      // 普通字段单列
      columns.push({
        field: fieldKey,
        header: fieldConfig.header
      });
    }
  });
  return columns;
}

// 生成表格行数据
getTableRows(revisions: any[]): any[] {
  if (!revisions?.length) return [];
  return revisions.map(row => {
    const processedRow = {};
    Object.keys(row).forEach(fieldKey => {
      const fieldConfig = row[fieldKey];
      if (fieldConfig.hasOwnProperty('oldValue') && fieldConfig.hasOwnProperty('newValue')) {
        processedRow[`${fieldKey}_old`] = fieldConfig.oldValue;
        processedRow[`${fieldKey}_new`] = fieldConfig.newValue;
      } else {
        processedRow[fieldKey] = fieldConfig.header;
      }
    });
    return processedRow;
  });
}

Angular 模板代码 #

<table>
  <thead>
    <tr>
      <th *ngFor="let col of columns">
        {{col.header}}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of tableRows">
      <td *ngFor="let col of columns">
        {{row[col.field]}}
      </td>
    </tr>
  </tbody>
</table>

调用示例 #

在组件获取到revisions数据后，直接调用两个方法生成对应配置即可：

columns = [];
tableRows = [];

ngOnInit() {
  // 假设你已经获取到revisions数据
  this.columns = this.getColumns(this.revisions);
  this.tableRows = this.getTableRows(this.revisions);
}

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