angular - ag 网格分页不起作用，最初使服务器调用两次

Question

单击页面上的搜索按钮将从服务器调用返回结果，并应将其显示在 ag 网格中。每次点击分页详情seinding服务器将只返回那么多的记录给客户端。

已实现 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
    ]
})