Changement dynamique headerName ag-grid Angulaire 2?

Question

Je possède ce code:

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)); 

et cette fonction:

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

Comme vous pouvez le voir, le mod FY va changer après la demande. Comment puis-je le changer en colonnes? J'ai encore essayé d'appeler la fonction de rendu de grille, (this.gridOptions.api.refreshView();) mais cela ne m'a pas aidé.

Answer 1

Je peux le faire en obtenant la colonne actuelle def et changer le nom d'en-tête

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

puis appeler refreshHeader

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

peut-être essayer le rafraîchissement d'abord, puis voir si vous avez besoin d'accès la colonneDf directement ... Espérons que cela aide.

Answer 2

Vous pouvez affecter dynamiquement des noms d'en-tête après avoir lié des données dans la grille dans l'événement GridReady.

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

// Colonne def

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

params_1 est le nom de clé de colonne ne colonne.