Angular - ag-grid - 动态添加列答案

【问题标题】：Angular - ag-grid - add columns dynamicallyAngular - ag-grid - 动态添加列
【发布时间】：2019-03-01 07:11:27
【问题描述】：

我需要在 2 种情况下向我的 Ag-grid 添加一些列。其他情况我只需要基列。

所以在构造函数中我这样声明我的网格：

this.gridOption.columnDefs = [
  {
        headerName: 'Admission date',
        field: 'admissionPlannedDate',
        cellRendererFramework: DateCellRendererComponent,
        cellRendererParams: (params) => {
          return (params.data.admissionPlannedDate ? {dateFormat: 'dd.MM.yyyy - HH:mm'} : {dateFormat: ' '});
        },
        cellStyle: function (params) {
          return (params.data.admissionPlannedDate < new Date() ? {color: 'red'} : {});
        }
      },
      {
        headerName: 'Lastname',
        field: 'lastName',
        cellStyle: function (params) {
          return (params.data.edsId === null ? {color: 'orange'} : {});
        }
        },
      },
      {
        headerName: 'Sex',
        field: 'sex',
      },
      {
        headerName: 'Birthdate',
        field: 'birthDate',
        cellRendererFramework: DateCellRendererComponent,
        cellRendererParams: (params) => {
            return (params.data.birthDate ? {dateFormat: 'dd.MM.yyyy'} : {dateFormat: ' '});
        },
      },
      {
        headerName: 'Localisation',
        field: 'localisation',
      }
];

然后在我的 ngOnInit 中，在某些情况下我需要将列添加到我的 ag-grid。

我尝试了以下方法：

 this.gridOption.columnDefs.push(
                {
                  headerName: 'Block',
                  field: 'block',
                }, {
                  headerName: 'SDS/Hosp',
                  field: 'sdsOrHosp'
                }
              );
console.log(this.gridOption); //I see the new columns here so the add worked but i don't see them visual in my grid

也试过了

 this.gridOption.columnDefs.push({ headerName: 'Bloc', field:'block'});
 this.gridOption.columnDefs.push({ headerName: 'SDS/Hosp', field:'SDSorHosp'});

有人有想法吗？谢谢

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

您不能只将新值推送到 columnDefs，我的意思是肯定可以，但在 ag-grid 的情况下，流程不像那样工作。

所以要实现你的目标（动态添加\删除columnDefs）你需要使用setColumnDefs(colDefs)方法

setColumnDefs(colDefs) 调用以将新的列定义设置到网格中。网格将重绘所有列标题，然后重绘所有行。

所以从逻辑上讲，您只需要创建新的列数组，然后调用this.gridOption.api.setColumnDefs(...)

【讨论】：

你知道我是否可以在 gridOption 2 others 列中添加 hide: true 然后在某些条件下设置 hide: false 吗？
是的，你可以这样做来设置隐藏属性

【解决方案2】：

如果您要动态添加的列是固定的，并且您想根据某些条件隐藏/取消隐藏这些列，您可以使用带有回调的 Hide 属性。

隐藏：真

【讨论】：

当我在 this.gridOption.api.getColumnDef('key').hide = false 之后执行此操作时；它不起作用，该列仍然隐藏
对我来说这可能是最简单的方法，而不是动态添加/删除列