ag grid分页不起作用，最初进行两次服务器调用

Question

单击页面上的搜索按钮将返回服务器调用的结果，并应在ag网格中显示该结果。 每次点击分页细节都是seinding server，只会向客户返回那么多记录。

实施了ag网格，但点击搜索后网格未加载。你能帮我弄清楚我做错了吗？

这是html，网格部分和搜索按钮。

 <form [formGroup]="myForm" >
   <div>
    <div class="panel-body">
     <div class="row col-md-12">
      <div class="form-group">
         <label for="category">Category</label>
         <select  class="form-control"
            (change)="getSubCategories($event.target.value)"
            formControlName="catCode"   >
            <option value="select" selected disabled>--Select--</option>
            <option *ngFor="let category of categoryMaster" value="{{category.catCode}}">{{category.catDesc}}</option>
         </select>
      </div>
      </div>
      <button type="submit" class="btn btn-default">Search</button>
   </div>
   </div>
   </form>
</div>
<div class="col-md-12" *ngIf="rowData.length > 0">  
    <ag-grid-angular #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
        [gridOptions]="gridOptions"
        [columnDefs]="columnDefs"    
        [rowData]="rowData"
        [datasource] = "dataSource"
        enableColResize
        enableSorting
        enableFilter
        rowSelection="single"
    ></ag-grid-angular>
</div>

组件

export class ISearchComponent {
    myForm: FormGroup;
    rowData: Array<IncidentHeaderModel> = new Array<IncidentHeaderModel>();
    gridOptions = <GridOptions>{
        context: {},
        rowModelType: 'pagination',
        enableServerSideFilter: true,
        paginationPageSize: 10

    };

    //defining the headers
    columnDefs:any[] = [
        {headerName: 'Status', field: 'incidentStatus.value'},
        {headerName: 'Category', field: 'categoryMast.catDesc'},
        {headerName: 'Sub Category', field: 'subCategoryMast.subCatDesc'},
        {headerName: 'Location', field: 'location.locName'},
        {headerName: 'Time', field: 'incidentTime'},
        {headerName: 'Delay(Hrs)', cellRenderer:this.getDelayInHours}

    ];


    constructor(private masterDataService:MasterDataService,private http: Http) {
        this.myForm = new FormGroup({
        'catCode'   : new FormControl()

    }  

//调用此数据源时

   dataSource = {
       pageSize: 10,
        getRows: (params: any) => {
          console.log("here dataSource")
                this.searchIncident(params.startRow, params.endRow); // returns json from server
                var rowsThisPage = this.rowData;
                var lastRow = -1;
                if (rowsThisPage.length <= params.endRow) {
                    lastRow = rowsThisPage.length;
                }
              params.successCallback(rowsThisPage, lastRow);
        }
     }

//服务器调用并返回json数据。

searchIncident(start:number, end:number){


  myJson['firstResult'] = start;
  myJson.maxResult = this.gridOptions.paginationPageSize;

   this.http.post(AppUtils.INCIDENT_SEARCH, this.myForm.value, {headers: headers}).subscribe(res=>{
             this.rowData = res.json().result;
     console.log("@@@@" +JSON.stringify(this.rowData));
         }, err=>{             
         });

    }
}

尝试过的解决方案（不工作）

在搜索按钮上调用网格点击这样

 private search() {
     this.gridOptions.api.setDatasource(this.dataSource);
   }

我添加了数据源以启用服务器端分页，然后如何调用该数据源？

有关ag-grid分页的任何帮助？如何加载数据源？

添加了plunker http://plnkr.co/edit/qIeONaAe4INyTuZTGAOK?open=app%2Fapp.component.ts&p=preview

Answer 1

我认为您必须在@ngmodules根模块

中导入ag-grid

内部导入

@NgModule({
    declarations: [ // put all your components / directives / pipes here

    ],
    imports: [ // put all your modules here
       ag-grid //for example
    ],
    providers: [ // put all your services here

    ],
    bootstrap: [ // The main components to be bootstrapped in main.ts file, normally one only
        AppComponent
    ]
})