当通过ngOnChanges调用gridOptions onGridReady时,Ag-grid成功加载了检索到的记录,但是仅当通过ngDoCheck调用时,才以完全相同的方式加载columnDefs(我可以看到一旦使用KeyValueDiffer / KeyValueChanges检测到更改,该方法就会被调用)。
在第一种情况下,rowData通过输入参数传递,但是在第二种情况下,通过service属性更新,该属性通过使用onKeyChanges的modelDiffer代码成功检测到其更改。调试器转到以下位置的this.gridOptions语句ngDoCheck,但该表未使用数据的行进行更新;仅显示列标题。
ngOnChanges代码(有效):
ngOnChanges(changes: SimpleChanges) {
this.gridOptions = {
onGridReady: (params) => {
this.gridApi = params.api;
this.gridOptions.api.setRowData(this.model.records);
this.gridOptions.api.setColumnDefs(this.columnDefs);
this.gridOptions.columnApi.sizeColumnsToFit(4000);
this.gridOptions.api.refreshHeader();
this.gridOptions.api.refreshCells({ force: true });
this.gridOptions.defaultColDef = this.defaultColDef;
this.gridOptions.isExternalFilterPresent = this.isExternalFilterPresent.bind(this);
this.gridOptions.doesExternalFilterPass = this.doesExternalFilterPass.bind(this)
},
rowSelection: 'multiple',
enableColResize: true,
enableSorting: true,
enableFilter: true,
};
}
ngDoCheck代码(不起作用):
ngDoCheck() {
const changes = this.modelDiffer.diff(this.model);
if (changes) {
this.gridOptions = {
onGridReady: (params) => {
this.gridApi = params.api;
this.gridOptions.api.setRowData(this.model.records);
this.gridOptions.api.setColumnDefs(this.columnDefs);
this.gridOptions.columnApi.sizeColumnsToFit(4000);
this.gridOptions.api.refreshHeader();
this.gridOptions.api.refreshCells({ force: true });
this.gridOptions.defaultColDef = this.defaultColDef;
this.gridOptions.isExternalFilterPresent = this.isExternalFilterPresent.bind(this);
this.gridOptions.doesExternalFilterPass = this.doesExternalFilterPass.bind(this)
},
rowSelection: 'multiple',
enableColResize: true,
enableSorting: true,
enableFilter: true,
};
}
}