Angular - ag-grid - 动态添加列

Question

在两种情况下，我需要向 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'});

有人有想法吗？谢谢

Answer 1

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

因此，要实现您的目标（动态添加\删除columnDefs），您需要使用setColumnDefs(colDefs)方法

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

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