Tener un formulario con una ag-grid , aunque la cuadrícula básica funciona, da error en la consola
no puede llamar a setRowData a menos que use el modelo de fila normal
Entonces, la mayoría de las funciones de la API, incluida Clear, no funcionan.
<form [formGroup]="myForm" (ngSubmit)="search()" > <button type="submit" class="btn btn-primary ripple">Search</button> </form> <div class="grid-wrapper animated fadeIn" > <ag-grid-angular #agGrid style="width: 100%; height: 315px;" class="ag-fresh" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" [datasource] = "dataSource" enableColResize rowSelection="single" ></ag-grid-angular> </div>Escriba el código sript, en la cuadrícula definida por el constructor y en el método de búsqueda, establezca el retorno de datos de la API del servidor. Además de ese método de devolución de llamada para paginación.
constructor(private masterDataService:MasterDataService,private http: Http) { this.myForm = new FormGroup({ }); this.gridOptions = <GridOptions>{ context:{}, rowModelType: 'pagination', paginationPageSize: 10, // onGridReady: function(event) { this.gridOptions.api.sizeColumnsToFit(); } // this will give error api undefined }; } search(){ let self = this; let dataSource = { paginationPageSize: 10, getRows: (params: any) => { let headers: Headers = new Headers(); headers.set("Content-Type", "application/json"); console.log("here dataSource"); this.formatReqData(params.startRow, params.endRow); this.http.post(AppUtils.INCIDENT_SEARCH, this.myForm.value, {headers: headers}).subscribe(res=>{ // server call if(res.json().result!= null){ self.gridOptions.api.setRowData(res.json().result.paginatedList); self.rowData = res.json().result.paginatedList; var rowsselfPage = self.rowData; var lastRow = -1; params.successCallback(rowsselfPage, res.json().result.totalRecords); }else{ self.gridOptions.api.setRowData(null); self.rowData = null; } }); }Cuestión relacionada
Si agrego esta condición ngIf="rowData.length" para dejar de mostrar la cuadrícula vacía, entonces la cuadrícula no se cargará en ningún momento.
<div class="grid-wrapper animated fadeIn" *ngIf="rowData.length > 0"> <ag-grid-angular #agGrid style="width: 100%; height: 315px;" class="ag-fresh" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" [datasource] = "dataSource" enableColResize rowSelection="single" ></ag-grid-angular> </div>Dado que el tipo de modelo de fila está configurado en 'paginación', no puede usar el método setRowData () para cambiar los datos de la cuadrícula. En su lugar, cree otra fuente de datos local que establezca datos vacíos y luego utilícelos como fuente de datos para su cuadrícula. Ejemplo a continuación:
clear(){ let self = this; let dataSource = { getRows(params:any) { params.successCallback([],0); } }; this.gridOptions.api.setDatasource(dataSource); } this.gridOption = <GridOption>{ context:{}, rowModelType: 'pagination', paginationPageSize: 10, rowModelType='normal' }intente con el código anterior y use ngshow con ngif con la misma condición para ambos.