Angular 2集成AG Grid：后端非键值对数据适配方案咨询

没问题，这种后端返回压缩格式、需要前端转成AG Grid所需键值对的场景太常见了！既然没法修改REST接口，咱们直接在Angular里做个简单的格式转换就搞定，给你两种实用的实现方式：

方法一：直观的遍历转换（适合新手理解） #

这种方法通过双层遍历，把cols里的列名和rows中对应位置的值一一绑定，生成AG Grid需要的键值对对象：

// 假设从后端获取的原始数据
const gridData = {
  cols: ['col1', 'col2'],
  rows: [['data1', 'data2'], ['data3', 'data4']]
};

// 转换为AG Grid要求的rowData格式
const rowData = gridData.rows.map(row => {
  // 初始化空对象存储当前行的键值对
  const rowObj: {[key: string]: any} = {};
  // 遍历列名数组，将对应位置的值赋值给对象属性
  gridData.cols.forEach((colName, index) => {
    rowObj[colName] = row[index];
  });
  return rowObj;
});

转换后rowData的结构就完全符合AG Grid要求：

[{col1: "data1", col2: "data2"},{col1:"data3", col2:"data4"}]

方法二：用reduce简化代码（更紧凑的写法） #

如果喜欢简洁的函数式写法，可以用Array.reduce来替代内层遍历，一行代码完成单行列的转换：

const rowData = gridData.rows.map(row => 
  gridData.cols.reduce((acc, colName, index) => {
    acc[colName] = row[index];
    return acc;
  }, {} as {[key: string]: any})
);

Angular组件中的实际应用示例 #

把转换逻辑放到组件的初始化钩子中，同时还能利用cols数组自动生成AG Grid的列定义，不用手动写columnDefs：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-ag-grid-demo',
  templateUrl: './ag-grid-demo.component.html',
  styleUrls: ['./ag-grid-demo.component.css']
})
export class AgGridDemoComponent implements OnInit {
  rowData: any[] = [];
  columnDefs: any[] = [];

  ngOnInit(): void {
    // 模拟调用后端接口获取数据
    this.fetchGridData().then(gridData => {
      // 用cols数组自动生成列定义
      this.columnDefs = gridData.cols.map(col => ({ field: col }));
      // 转换rowData
      this.rowData = gridData.rows.map(row => {
        const rowObj = {};
        gridData.cols.forEach((col, idx) => rowObj[col] = row[idx]);
        return rowObj;
      });
    });
  }

  // 模拟后端接口请求
  private fetchGridData(): Promise<any> {
    return Promise.resolve({
      cols: ['col1', 'col2'],
      rows: [['data1', 'data2'], ['data3', 'data4']]
    });
  }
}

对应的组件模板：

<ag-grid-angular
  style="width: 100%; height: 400px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs">
</ag-grid-angular>

额外注意事项 #

如果后端返回的rows中某一行的长度和cols不匹配（比如少了某个字段的值），可以加个判断避免出现undefined：

const rowData = gridData.rows.map(row => {
  const rowObj: {[key: string]: any} = {};
  gridData.cols.forEach((colName, index) => {
    // 检查当前行是否有对应索引的值，没有则设为空字符串或默认值
    rowObj[colName] = index < row.length ? row[index] : '';
  });
  return rowObj;
});

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