4

当表格最初接收异步检索的数据时，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。

4

0 回答 0