Question

在动态创建列时是否可以exportDataAsCsv？

在我的组件中，我创建了一些列，其中许多都是“即时添加” 基本上看起来像这样：

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

1 个答案: