agGrid: benutzerdefinierte Header-Spaltenbindung funktioniert nicht

Question

Ich versuche derzeit, eine Angular-Direktive in agGrid Header hinzuzufügen. Dafür übergeben ich eine Funktion in headerCellRenderer, wie folgend:

Mein gridOptions:

this.columnDefs = [ 
    {headerName: "Height", field: "rowHeight"}, 
    {headerName: "Athlete", field: "athlete", width: 180}, 
    {headerName: "Age", field: "age", width: 90}, 
    {headerName: "Country", field: "country", width: 120}, 
    {headerName: "Year", field: "year", width: 90} 
]; 
this.gridOptions = { 
    columnDefs: this.columnDefs, 
    rowData: null, 
    //enableSorting: true, 
    headerHeight: 60, 
    //enableFilter: true, 
    enableColResize: true, 
    angularCompileRows:true, 
    angularCompileHeaders: true, 
    headerCellRenderer: (params) => 
     {return this.headerCellRendererFunc(params);}, 
    rowSelection: 'multiple', 
}; 

Meine Funktion wie folgt definiert ist:

headerCellRendererFunc(params) { 
    const headerColDef = params.colDef; 
    headerColDef.name = headerColDef.headerName; 
    headerColDef.isMetadata = false; 
    return '<header column="headerColDef"></header>'; 
} 

Als Ergebnis meiner Richtlinie gemacht wird, aber die „Säule "Bindung ist leer, ich verstehe nicht, wie ich das Objekt an meine Direktive weitergeben muss.

Irgendwelche Ideen? Danke!

Answer 1

Wenn das irgendjemandem helfen kann, habe ich gerade meinen Fehler verstanden: Die params-Argumente haben einen Gültigkeitsbereich und das ist derjenige, der an die Direktive übergeben wurde, also musste ich nur mein Objekt in dem Bereich übergeben Arbeit !

params.$scope.column = headerColDef; 

mit dem html wie folgt aussehen:

return '<header column="column"></header>'; 

Answer 2

Stellen Sie die ag-grid gridOptions Eigenschaften angularCompileHeaders: true (Standardeinstellung ist false)

Versuchen Sie es! Es ist Arbeit für mich.

Ref: https://www.ag-grid.com/javascript-grid-properties/index.php