angular - 除非在 ag-grid 中使用正常行模型错误，否则无法调用 setRowData

Question

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

cannot call setRowData unless using normal row model

所以大多数 api 函数(包括clear)都不起作用。

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

键入脚本代码，在构造函数中定义网格并在搜索方法中设置从服务器 API 返回的数据。 除了调用回调方法进行分页之外。

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"来停止显示空网格，那么网格将不会在任何时候加载。

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

Answer 1

由于 rowModelType 设置为“分页”，因此无法使用 setRowData() 方法更改网格数据。相反，创建另一个设置空数据的本地数据源，然后将其用作网格的数据源。下面的例子:

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