初始组件加载后，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() 中再次重新定义（为了简洁起见，仅包含在下面示例代码的构造函数中）也是如此。此外，如果在 ngOnInit() 内重复整个 onGridReady: (params) 调用。

相反，如果在父级中构造 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。

预期结果：在隐藏->显示后重新初始化组件后应用defaultColDef。

Answer 1

如果更换线路

this.gridOptions.defaultColDef = this.defaultColDef;

和

this.gridOptions.setDefaultColDef(this.defaultColDef);

那么我希望它能像你所期望的那样工作。

如果将gridOptions对象传递给<ag-grid-angular>模板，则当前对其所做的更改将不会反映出来。

但是，您可以执行以下操作，网格将会更新defaultColDef。

<ag-grid-angular [defaultColDef]="defaultColDef">

// in component assigning a new object will update the grid.
this.defaultColDef = newDefaults;