动态更改 headerName ag-grid Angular 2？答案

【问题标题】：Dynamic change headerName ag-grid Angular 2?动态更改 headerName ag-grid Angular 2？
【发布时间】：2020-01-28 23:05:04
【问题描述】：

我有这个代码：

public fy: string = "17";
let months = ['July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April', 'May', 'June',];

        function headerCellRendererFunc(year, params) {
            const eHeader = document.createElement('span');
            eHeader.innerText = `${params.colDef.headerName} ${year}`;
            return eHeader;
        }

        const januaryIndex = months.indexOf('January');
        months.map((month, index, arr) => {
            const year = januaryIndex === 0 || index > januaryIndex ? this.fy : this.fy + 1;

            return <ColDef>{
                headerName: month,
                headerCellRenderer: headerCellRendererFunc.bind(null, year),
                field: `data.${month}`,
                editable: isEditable,
                valueGetter: cellMonthValueGetter(month, index),
                cellFormatter: cellMonthValueFormatter,
                newValueHandler: cellMonthNewValueHandler(month),
                width: 100,
            };
        }).forEach((colDef) => colDefs.push(colDef));

还有这个功能：

refresh(): void {
    let jobId = +this.route.snapshot.parent.params['id'];
    this.jobService.getJob(jobId).then(result => {
        this.job = result.Object;
        this.fy = result.Object.FinancialYearName;
        this.jobService.getTimePhasing(jobId).then(result => {
            this.setModel(result.Object);
        });
    });
}

如您所见，FY mod 将在请求后更改。如何在列中更改它？我再次尝试调用网格渲染函数 (this.gridOptions.api.refreshView ();) 但这对我没有帮助。

【问题讨论】：

是唯一改变列顺序的东西吗？我不太明白需要更改 headerName
@JarodMoser 月份的名称加了一年。可以改变，在列标题中动态改变很烦人。

标签： typescript ag-grid

【解决方案1】：

您可以在 GridReady 事件中将数据绑定到网格后动态分配标题名称。

this.gridOptionsDetail.api.getColumnDef("params_1").headerName = "Files Count (" + fileCount + )";
this.gridOptionsDetail.api.refreshHeader();

//列定义

this.columnDefs = [
                        {
                headerName: "Test Columns",
                field: "test1",
                cellStyle: { 'text-align': 'left' },
                suppressSorting: true,
                minWidth: 250,
                ColId:"params_1"
            }];

params_1 是列键而不是列名。

【讨论】：

在 v24.0.0 中 getColumnDef(...) 在他们的 API 中不存在，但 getColumnDefs 存在

【解决方案2】：

我可以通过获取当前列定义并更改标题名称来做到这一点

this.baseGrid.gridOptions.api.getColumnDef("clan").headerName = "WOW";

然后调用refreshHeader

this.baseGrid.gridOptions.api.refreshHeader();

也许先尝试刷新，然后看看是否需要直接访问 columnDf...希望这会有所帮助。

【讨论】：

【解决方案3】：

很遗憾，您似乎无法使用相同的技术刷新自动列的标题文本。

【讨论】：