除非在ag-grid中使用正常的行模型错误，否则无法调用setRowData [英] Cannot call setRowData unless using normal row model error in ag-grid

问题描述

具有一个带有 ag-grid 的表单，即使基本网格正在工作，它也会在控制台中产生错误

Having a form with an ag-grid, even though basic grid is working it gives error in console

除非使用常规行模型，否则无法调用setRowData

cannot call setRowData unless using normal row model

因此，大多数api函数（包括clear）均无法正常工作。

So most of the api functions including clear not working.

 <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>

类型sript代码，在构造函数定义的网格中和在搜索方法中，设置从服务器api返回的数据。
除了调用分页的回调方法。

Type sript code, in constructor defined grid and in search method set the data return from server api. In addition to that calling callback method for pagination.

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;
                 }
             });
    }

相关问题

如果我添加此条件 ngIf = rowData.length 以停止显示空网格，则网格将不会始终加载。 / p>

If I add this condition ngIf="rowData.length" to stop displaying empty grid, then grid will not load at all any time.

    <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>

推荐答案

由于rowModelType设置为'pagination'，因此您无法使用setRowData（）方法更改网格数据。而是创建另一个设置空数据的本地数据源，然后将其用作网格的数据源。下面的示例：

Since the rowModelType is set to 'pagination', you cannot use setRowData() method to change the grid data. Instead create another local data source which sets empty data, and then use that as the data source to your grid. Example below:

clear(){
    let self = this;
    let dataSource = {
        getRows(params:any) {
            params.successCallback([],0);
        }
    };
    this.gridOptions.api.setDatasource(dataSource);
}

这篇关于除非在ag-grid中使用正常的行模型错误，否则无法调用setRowData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！