在 ag-grid 中将数据作为具有列及其计算值的键值对获取

Question

我使用了 ag-grid，一些列使用直接值，一些列使用 valueGetters。

  columnDef: ColDef[] = [
    { field: 'column1' },
    { field: 'column2' },
    { headerName: 'column3', valueGetter: this.getColumn3Value }
  ];

我可以使用实际的行数据，因为我已经为 ag-grid 提供了行数据。问题是我找不到任何方法来获取以下格式的数据：

键值对，以列为键，从 ag-grid 的 valueGetters 获得的渲染值作为值。

例如： [{column1:'column1Data', column2: 'column2Data', column3: 'column3Data_found_using_valueGetter'}]

否则我必须处理实际的行数据才能得到上面的格式。

Answer 1

终于找到解决这个问题的方法了。

在我的研究中，没有特定的方法来检索 ag-grid 上显示的详细信息。但是我们可以使用 getDataAsCsv() 方法，它将 return headers 和 ag-grid 的行值以 csv 格式，我们可以将数据格式化为所需的格式。

CSV 数据：

"Athlete","Country","Sport","Total"
"Eamon Sullivan","Australia","Swimming","3"
"Dara Torres","United States","Swimming","3"

这是获取 ag-grid 上显示的数据键值对的代码：

onGridReady(event){
   this.gridApi = event.api;
}

csvToKeyvaluePair() {
    // Removes the doube quotes present on each string
    let csvData = this.gridApi.getDataAsCsv().replace(/"/g, "");

    // Splits header and each row values
    let [header, ...values] = csvData.split('\n');

    // Returns an array of header value 
    let headerLine = header.split(',');

    // Generate an array of key value pairs
    let displayedData = values.map((item, index) => {
      return item.split(',').reduce((result, current, index) => ({ ...index === 1 ? { [headerLine[0]]: result } : result, ...index === 1 ? { [headerLine[1]]: current } : { [headerLine[index]]: current } }));
    });

    //  Displays row data in key value pairs
    console.log(displayedData);
}

结果：

[
  {
    Athlete: "Eamon Sullivan",
    Country: "Australia",
    Sport: "Swimming",
    Total: "3"
  },
  {
    Athlete: "Dara Torres",
    Country: "United States",
    Sport: "Swimming",
    Total: "3"
  }
]

在 ag-grid 中将数据作为具有列及其计算值的键值对获取

Getting data as key value pairs having columns and its calculated values on ag-gird

angular

ag-grid

ag-grid-angular