Angular项目使用ag-grid如何格式化接口数据生成所需rowData

核心问题梳理 #

你目前的代码存在两个核心错误：

• 所有时间列的field属性重复设置为color，ag-grid要求每列的field必须唯一，才能正确匹配行数据
• 未对接口返回的table_rows做结构转换，不符合ag-grid的rowData要求

具体实现步骤 #

1. 修正列定义与行数据构造逻辑 #

每列用时间值作为唯一field，同时给当前时间的表头添加黄色背景样式，再把接口返回的嵌套行数据转为ag-grid可识别的扁平化结构：

ngOnInit() {
  // 先清空旧的列定义，避免重复渲染
  this.columnDefs = [];
  // service call 成功后执行
  if (data.result === UIConstants.SUCCESS && data.status_code === UIConstants.STATUS_CODE) {
    // 固定的第一列（姓名列）
    this.columnDefs.push({
      headerName: 'Name',
      field: 's_name',
      pinned: 'left', 
      resizable: true,
      width: 200
    });
    // 构造时间列
    data.table_header.forEach(headerItem => {
      this.columnDefs.push({
        headerName: headerItem.time,
        field: headerItem.time, // 用时间作为唯一field
        width: 70,
        // 表头样式：当前时间标黄
        headerClass: headerItem.isCurrentTime ? 'current-time-header' : '',
        // 单元格样式：用对应时间的color值作为背景色
        cellStyle: (params) => {
          return params.value ? { backgroundColor: params.value, border: '1px solid' } : { border: '1px solid' }
        }
      });
    });
    // 构造符合ag-grid要求的rowData
    this.rowData = data.table_rows.map(rowItem => {
      // 先初始化行对象，带姓名属性
      const row = { s_name: rowItem.s_name };
      // 把嵌套的时间颜色数组转成键值对，键为时间，值为颜色
      rowItem.data.forEach(timeItem => {
        row[timeItem.time] = timeItem.color;
      });
      return row;
    });
  }
}

2. 添加全局样式实现当前时间表头标黄 #

在你的组件css或者全局样式文件里添加：

.current-time-header {
  background-color: #ffff00 !important;
}

3. 模板部分无需修改，保持原有ag-grid标签即可 #

<ag-grid-angular class="ag-theme-alpine stock-table" [rowData]="rowData" [columnDefs]="columnDefs"
  [defaultColDef]="gridOptions.defaultColDef" #agGrid>
</ag-grid-angular>

转换后数据格式说明 #

转换后的rowData结构如下，完全匹配ag-grid的渲染要求：

[
  { s_name: 'Joy', '07:00': '#ff0000', '07:10': '', '07:20': '' },
  { s_name: 'Anna', '07:00': '', '07:10': '#00FF00', '07:20': '' },
  { s_name: 'Sam', '07:00': '', '07:10': '#00FF00', '07:20': '#ff0000' }
]

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