我试图为自己的文档中描述来实现AG-网格服务器端行模式在这里。我试图做的是将api调用及其参数作为道具传递给网格组件。问题在于,当尝试通过this.props或通过this.state来访问道具时,它们均未定义。我的代码如下所示:
onGridReady(params) { this.gridApi = params.api; this.gridColumnApi = params.columnApi; this.gridApi.showLoadingOverlay(); var dataSource = { rowCount: null, getRows: function(params) { setTimeout(function() { let serviceParams = this.props.dataServiceParams ? this.props.dataServiceParams.slice() : {}; serviceParams.pageSize = this.state.paginationPageSize; // this will be the rows returned per service call serviceParams.index = // if there is more than 1 page for the pagesize this is the index/page to return. serviceParams.sortAndFilters = gridUtility.combineSortAndFilters(params.sortModel, params.filterModel); this.props.dataService(serviceParams) .then(out => { var rowsThisPage = out; var lastRow = -1; params.successCallback(rowsThisPage, lastRow); }); params.context.componentParent.gridApi.hideOverlay(); }, 500); } }; params.api.setDatasource(dataSource); };
dataService道具包含我的service / api调用,而dataServiceParams具有该服务所需的任何参数。我正在添加其他参数来处理排序,过滤和返回所需的数据页/索引。我在这里想念什么?
您需要使用Arrow function来访问父范围的属性。检查以下代码的getRows和setTimeout。
Arrow function
getRows
setTimeout
var dataSource = { rowCount: null, getRows: (params) => { setTimeout(() => { let serviceParams = this.props.dataServiceParams ? this.props.dataServiceParams.slice() : {}; serviceParams.pageSize = this.state.paginationPageSize; // this will be the rows returned per service call serviceParams.index = // if there is more than 1 page for the pagesize this is the index/page to return. serviceParams.sortAndFilters = gridUtility.combineSortAndFilters(params.sortModel, params.filterModel); this.props.dataService(serviceParams) .then(out => { var rowsThisPage = out; var lastRow = -1; params.successCallback(rowsThisPage, lastRow); }); params.context.componentParent.gridApi.hideOverlay(); }, 500); } };