Ag-grid ExportAsCsv, когда столбцы создаются динамически

Возможно ли 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

То, что я вижу, выглядит очень похоже, и я не уверен, как заставить его работать... У кого-нибудь была такая проблема?


angular ag-grid ag-grid-angular
person user122222    schedule 13.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward 

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 : '';
  }
};

// ... }

person user122222    schedule 13.03.2019