收听 header ag-grid 的变化

Question

我使用此示例作为创建自定义的参考 header https://stackblitz.com/edit/clabnet-ag-grid-rich。

我是这样修改的：

我有一个按钮可以打开模式弹出窗口来编辑列的 header。它工作正常，但是在刷新后标题又回到了之前的状态，因为我不知道如何让我的 ag-grid 收听这些变化。

这是我的习惯header:

import { Component, ElementRef, OnDestroy, ViewChild, Output, EventEmitter } from '@angular/core';
import { IHeaderParams } from 'ag-grid';
import { IHeaderAngularComp } from 'ag-grid-angular';
import { ModalComponent } from '../modal/modal.component';

interface MyParams extends IHeaderParams {
    menuIcon: string;
}

@Component({
    selector: 'app-column-header',
    templateUrl: './column-header.component.html'
})
export class ColumnHeaderComponent implements OnDestroy, IHeaderAngularComp {
// .... //

    // #region [Column editor]
    @ViewChild('columnEditor')
    columnEditor: ModalComponent;

    edit() {
        this.columnTitle = this.params.displayName;
        this.columnEditor.show();
    }

    saveRow() {
        this.columnEditor.close();
        this.params.displayName = this.columnTitle;
    }

    // #endRegion
}

<div style="display: flex; align-items: center;">
    <div style="display: inline-flex;margin-left: 10px; width: 80%" (click)="onSortRequested(sortType, $event)">
        <div class="customHeaderLabel">{{params.displayName}}</div>

        <div [hidden]="!params.enableMenu" class="customHeaderMenuButton" (click)="edit()">
            <span title="Edit">
                Edit
            </span>
        </div>
    </div>
</div>

<!-- Column title editor -->
<app-modal #columnEditor class="form" [width]="600" [hideOnBlur]="false" #modal>
    <div header>
        Edit
    </div>

    <div body>
        <div class="form-column">
            <div class="form-row">
                <label>
                   Title
                </label>
                <input type="text" [(ngModel)]="columnTitle" placeholder="title">
            </div>

        </div>
    </div>

    <div footer>
        <button class="btn btn-a" (click)="saveRow()">Save</button>
        <button class="btn btn-a" (click)="columnEditor.close()">Cancel</button>
    </div>
</app-modal>

这是我的 ag-grid:

    initializeColumnDefs() {
        this.columnDefs = [
            {
                headerName: '',
                width: 50,
                field: `[=14=]`,
                suppressFilter: true,
                lockPosition: true, // always show row column first
                cellRenderer: (params) => {
                    return params.data.rowHeader ? params.data.rowHeader : '';
                },
                valueGetter: (params: any) => {
                    return params.data.rowHeader ? params.data.rowHeader : '';
                },
            }];

        for (let i = 0; i < this.columns; i++) {
            let header = '';
            if (this.columnHeaders && this.columnHeaders.length > 0) {
                header = this.columnHeaders[i].header;
            }
            this.columnDefs.push({
                colId: 'name',
                field: 'name',
                headerName: header,
                filter: 'agNumberColumnFilter',
                menuTabs: ['filterMenuTab'],

            }
            );
        }

        this.frameworkComponents = {
            headerComponent: ColumnHeaderComponent,
        };

<ag-grid #grid class="ag-fresh" style="width: 100%; height: 100%;"
 [enableColResize]="enableColResize" [height]="height"
    [frameworkComponents]="frameworkComponents" [domLayout]="domLayout" [enableFilter]="true" [localeText]="localeText"
    [columnDefs]="columnDefs" [autoSizeColumns]="autoSizeColumns" (cellDoubleClicked)="cellDoubleClicked($event)"
    [enableSorting]="enableSorting" [rowSelection]="rowSelection" (selectionChanged)="selectionChanged()"
    [rowData]="model">
</ag-grid>

如何将更改从我的自定义 header 发送到 table？

Answer 1

我没有得到答案，但我自己找到了解决方案，所以如果有人需要，这里是我找到的解决方案：

首先，给你添加headerValueGetter columnDefs:

        for (let i = 0; i < this.columns; i++) {
            let header = '';
            if (this.columnHeaders && this.columnHeaders.length > 0) {
                header = this.columnHeaders[i].header;
            }
            this.columnDefs.push({
                colId: i + 1,
                field: `${i + 1}`,
                headerName: header,
                filter: 'agNumberColumnFilter',
                menuTabs: ['filterMenuTab'],
                headerValueGetter: (params: any) => {
                    const headerTitle = this.columnHeaders[params.colDef.colId - 1].header; debugger;
                    if (headerTitle != params.colDef.headerName) {
                        this.columnHeaders[params.colDef.colId - 1].header = params.colDef.headerName;
                        //update in database
                        this.updateChanges();
                    }
                    return params.colDef.headerName;
                },

            }
            );
        }

        this.frameworkComponents = {
            headerComponent: ColumnHeaderComponent,
        };

在您的自定义 header 组件中触发更改事件。这样您就可以转到 headerValueGetter 并检查您的 headerName 是否已更改。

    saveHeader() {
        this.columnEditor.close();
        this.params.column.getColDef().headerName = this.columnTitle;

        // reset state to trigger headerValueGetter
        const state = this.params.columnApi.getColumnState();
        this.params.columnApi.setColumnState(state);
    }

收听 header ag-grid 的变化

Listen to header changes in ag-grid

javascript

ag-grid

angular