Ag-grid defaultColDef not re-applied after initial component load

问题

Ag-grid applies defaultColDef formatting (cellStyle and cellRenderer) perfectly using ngOnChanges when the table initially receives async-retrieved data. However, if the component containing the grid is hidden and then re-initialized via an *ngIf condition, the table is re-populated with the correct data, but defaultColDef formatting is not reapplied even though the ngOnChanges is triggered again just as before, and this.gridOptions.defaultColDef = this.defaultColDef; is set within the onGridReady callback in ngOnChanges, and I can see this.defaultColDef is defined to be the correct object during debugging.

This is even if this.defaultColDef is redefined again in ngOnInit() and even again in ngOnChanges() (just included in the constructor in below sample code for conciseness). Also if the entire onGridReady: (params) call is repeated inside ngOnInit().

If instead the same cellStyle and cellRenderer are assigned to the columnDefs as properties when the columnDefs object is constructed in the parent, then the formatting is correctly applied when the grid component is hidden and re-shown (re-initialized).

 export class ResultsTableComponent implements OnInit, OnChanges {
 @Input() label;
 gridOptions: GridOptions ;
 gridApi;
defaultColDef;

 get query(): string {
     return this.searchService.query;
 };
 get rowData() {
     return this.searchService.rowDataForAgGrid;
 };
 @Input()
 set rowData(value) {
     this.searchService.rowDataForAgGrid=value;
 };
 get columnDefs() {
     return this.searchService.columnDefsForGrid;
 };
 @Input()
 set columnDefs(value) {
     this.searchService.columnDefsForGrid=value;
 };

 constructor(private searchService: SearchService) {

   this.defaultColDef = {
     editable: true,
     cellStyle: function(params) {
       if (params.value == 'FAIL') {
           return {color: 'white', backgroundColor: 'red',  textAlign: 'center'};
       }  if (params.value == 'PASS') {
         return {color: 'white', backgroundColor: 'forestgreen', textAlign: 'center'};
       }  if (params.value == 'SKIP') {
         return {color: 'white', backgroundColor: 'royalblue', textAlign: 'center'};
       }  if (params.value == 'NOT RUN') {
         return {color: 'white', backgroundColor: 'lightgray', textAlign: 'center'};
       } else {
           return null;
       }
     },
     cellRenderer: function (params) {
     if (params.value && (typeof params.value == 'string') &&  params.value.includes('http://')) {
         return `<a href='${params.value}' >${params.value}</a>` ;
     } else if (params.colDef.field.includes('name')) {
         return `<a href='/Detail.html?id=${params.data.DocumentId}'  target='_blank'>${params.value}</a>` ;
     } else if (params.colDef.field.includes('DocumentId')) {
       return `<a href='/Triage.html?id=${params.data.DocumentId}' target='_blank'>${params.value}</a>` ;
     } else {
          return params.value;}
       },
 };
   this.gridOptions = <GridOptions>{
     columnDefs: [],
     rowData: [],
     defaultColDef: this.defaultColDef,
     groupSelectsChildren: true,
     suppressRowClickSelection: true,
     rowSelection: 'multiple',
     enableColResize: true,
     enableSorting: true,
     enableFilter: true,
     rowHeight: 45,
     isExternalFilterPresent: this.isExternalFilterPresent,
     doesExternalFilterPass: this.doesExternalFilterPass,
   };
   this.gridOptions = {
     onGridReady: (params) =>  setTimeout(function(){
       this.gridApi = params.api,0
     }),
   };
   this.label = 'all';
 }

 ngOnInit() {
}

 ngOnChanges(changes: SimpleChanges) {

   this.gridOptions = {
     onGridReady: (params) => {
       this.gridApi = params.api;
       this.gridOptions.api.setRowData(this.rowData);
       this.gridOptions.defaultColDef = this.defaultColDef;
       this.gridOptions.api.setColumnDefs(this.columnDefs);
       this.gridOptions.api.refreshHeader();
       this.gridOptions.api.refreshCells({force : true});
       this.gridOptions.isExternalFilterPresent  =     this.isExternalFilterPresent.bind(this);
       this.gridOptions.doesExternalFilterPass = this.doesExternalFilterPass.bind(this)
      },
     rowSelection: 'multiple',
     enableColResize: true,
     enableSorting: true,
     enableFilter: true,
   };
  if (changes.label && changes.label.currentValue != changes.label.previousValue) {
     this.externalFilterChanged(this.label);
   }
 }

Actual result: Columns and rows are populated correctly after re-init of component, but defaultColDef not applied.

Expected result: defaultColDef applied after re-init of component after hide->show.

来源：https://stackoverflow.com/questions/57147736/ag-grid-defaultcoldef-not-re-applied-after-initial-component-load