动态创建列时的 Ag-grid ExportAsCsv

Question

动态创建的列可以exportDataAsCsv吗？

在我的组件中，我创建了添加了许多列的列 'on the fly' 它基本上是这样的：

initializeColumnDefs() {
this.columnDefs = [
  {
    headerName: 'Title',
    field: 'title',
    colId: 'title',
    cellRenderer: (params: any) => params.value
  },

];

let p = array.filter(p => p.propId == this.prop.id);
let dict= this.getProperties(this.getLookup(properties.map(p => p.id)));
for (const id of Object.keys(dict)) {
  let propertyGroup = dict[id];

  this.columnDefs.push({
    headerName: propertyGroup.name,
    colId: id,
    field: '',
    valueFormatter: (params: any) => {
      if (!params || !params.data)
        return '';

      let val;
      params.data.values.forEach(v => {
        if (v.propertyId === id)
          val = v.value;
      });
      params.value = val;
      return params.value;
    },
  });
}

}

如你所见，第一列是已知的，其他的是动态添加的，可能是一列，也可能是十列。

然后在我的导出方法中，我尝试做类似的事情：

 export() {
let header = this.columnDefs.map(columnDef => {
  let headerName = columnDef.headerName;
  return headerName;
});
let p = array.filter(p => p.propId == this.prop.id);
let dict= this.getProperties(this.getLookup(properties.map(p => p.id)));
let params: any = {
  fileName: 'export.csv',
  columnSeparator: ',',
  skipHeader: true,
  columnKeys: this.columnDefs.map(c => c.field || c.colId).filter(c => !!c),
  // format cells before exporting
  processCellCallback: function (p) {
    if (p) {
      if (p.column.colId === 'title')
        return p.value;
      else {
        for (const id of Object.keys(dict)) {
          if (p.column.colId === id ) {
            let val: any;
            p.data.values.forEach(v => {
              if (v.propertyId === id)
                val = v.value;
            });
            p.value = val;
            return p.value;
          }
        }
      }
    }
    return p.value ? p.value : '';
  }
};
params.customHeader = header.join(params.columnSeparator) + '\n';
this.grid.api.exportDataAsCsv(params);

}

然而，在这部分 p.data.values.forEach(v => { ... 在导出方法中我得到 Uncaught TypeError: Cannot read property 'values' of undefined at _loop_4

就我所见，它看起来非常相似，但我不确定如何让它工作...有人遇到过这样的问题吗？

Answer 1

initializeColumnDefs() {
this.columnDefs = [
  {
    headerName: 'Title',
    field: 'title',
    colId: 'title',
    cellRenderer: (params: any) => params.value
  },
];
let p = array.filter(p => p.propId == this.prop.id);
let dict= this.getProperties(this.getLookup(properties.map(p => p.id)));
for (const id of Object.keys(dict)) {
  let propertyGroup = dict[id];

  this.columnDefs.push({
    headerName: propertyGroup.name,
    colId: id,
    field: '',
    valueFormatter: (params: any) => {
      if (!params || !params.data)
        return '';

      let val;
      params.data.values.forEach(v => {
        if (v.propertyId === id)
          val = v.value;
      });
      params.value = val;
      return params.value;
    },
 valueGetter: (params: any) => {
          if (!params || !params.data)
            return '';

          let val;
          params.data.values.forEach(v => {
            if (v.propertyId === id)
              val = v.value;
          });

          params.value = val;
          return params.value;
        },
  });
}

其实我发现这是一个相当大胆的错误，我只是需要valueGetter 然后我可以省略一半的导出并像这样：

 export() {
let header = this.columnDefs.map(columnDef => {
  let headerName = columnDef.headerName;
  return headerName;
});
let params: any = {
  fileName: 'export.csv',
  columnSeparator: ',',
  skipHeader: true,
  columnKeys: this.columnDefs.map(c => c.field || c.colId).filter(c => !!c),
  // format cells before exporting
  processCellCallback: function (p) {
    if (p) {
      if (p.column.colId === 'organizationId')
        return ConstantService.OrganizationDictionary[p.value].name;
      if (p.column.colId === 'assetId')
        return ConstantService.AssetDictionary[p.value].name;
    }
    return p.value ? p.value : '';
  }
};

// ... }

动态创建列时的 Ag-grid ExportAsCsv

Ag-grid ExportAsCsv when columns where created dynamically

ag-grid

angular

ag-grid-angular