angular - Ag-grid defaultColDef が最初のコンポーネントのロード後に再適用されない

Question

Ag-grid は、テーブルが最初に非同期取得されたデータを受け取るときに、ngOnChanges を使用して defaultColDef フォーマット (cellStyle および cellRenderer) を完全に適用します。ただし、グリッドを含むコンポーネントが非表示になり、*ngIf 条件によって再初期化された場合、テーブルには正しいデータが再入力されますが、前と同じように ngOnChanges が再びトリガーされても、defaultColDef フォーマットは再適用されません。this.gridOptions.defaultColDef = this.defaultColDef;ngOnChanges の onGridReady コールバック内に設定されており、デバッグ中に this.defaultColDef が正しいオブジェクトとして定義されていることがわかります。

これは、this.defaultColDef が ngOnInit() で再定義され、さらに ngOnChanges() で再定義された場合でも同様です (簡潔にするために、以下のサンプル コードのコンストラクターに含まれています)。また、onGridReady: (params) 呼び出し全体が ngOnInit() 内で繰り返される場合も同様です。

代わりに、親で columnDefs オブジェクトが構築されるときに、同じ cellStyle および cellRenderer がプロパティとして columnDefs に割り当てられる場合、グリッド コンポーネントが非表示になり、再表示 (再初期化) されるときに、書式設定が正しく適用されます。

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

実際の結果: コンポーネントの再初期化後に列と行が正しく入力されますが、defaultColDef は適用されません。

期待される結果: hide->show 後のコンポーネントの再初期化後に defaultColDef が適用されます。