Question

在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'});

有人有主意吗？谢谢

Answer 1

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

隐藏：是

Answer 2

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

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

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

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

Angular-Ag-Grid-动态添加列

2 个答案: