angular - Zdroj údajov sa v ag gride nespúšťa

Implementoval som ag-grid a definoval zdroj dát.

ale dátový zdroj sa nevykonáva, ako sa dátový zdroj spustí

Toto je html

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

komponenty boli definované mriežkou

import { Component } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";
import {GridOptions} from "ag-grid/main";
import {Http, Headers} from '@angular/http';
import * as AppUtils from '../common/app.utils';



@Component({ 
    selector: 'incident-search',
    templateUrl: 'app/search/iSearch.component.html'
})
export class ISearchComponent {
    myForm: FormGroup;
    rowData: Array<IncidentHeaderModel> = new Array<IncidentHeaderModel>();

    gridOptions = <GridOptions>{
        context: {},
        rowModelType: 'pagination',
        enableServerSideFilter: true,
        paginationPageSize: 10

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



    searchIncident(start:number, end:number){

      if (!start) {
            start = 1;
          }
      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;
             }, err=>{             
             });

        }
    }

V HTML pri kliknutí na tlačidlo hľadania sa snažím vyvolať mriežku, čo sa nepodarilo.

searchIncident() {

//html vyhľadávacie tlačidlo

Hľadať

Toto je jediné varovanie, ktoré sa objavuje v konzole nemôžete volať setRowData, pokiaľ nepoužívate normálny model riadkov

Pridaný neúplný plnkr http://plnkr.co/edit/qIeONaAe4INyTuZTGAOK?open=app%2Fapp.component.ts&p=preview

Odpoveď č. 1

Vyskúšajte nasledujúci kód, s odkazom na https://www.ag-grid.com/example-angular-dynamic/#dynamic&gsc.tab=0

dataSource bude mať spätné volanie, ktoré zobrazí dáta na mriežke. this.gridOptions.api.setRowData(data); je zodpovedné za obnovenie dát mriežky.

A metóda, ktorá vykonáva AJAX, by mala vrátiť odpoveď, pretože túto odpoveď budeme spracovávať v dataSource.getRows

gridOptions = <GridOptions>{
  context: {},
  rowModelType: 'pagination',
  enableServerSideSorting: true,
  paginationPageSize: 10

};
page = 1;
searchIncident(start:number, end:number){
  if (!start) {
    start = 1;
  }
  myJson['firstResult'] = start;
  myJson.maxResult = this.gridOptions.paginationPageSize;

  this.http.post(AppUtils.INCIDENT_SEARCH, this.myForm.value, {headers: headers}).subscribe(res=>{
    return res.json().result;
    }, err=>{             
    });
}
dataSource = {
  pageSize: 10,
  //overflowSize: 10,
  getRows: (params: any) => {
    let data = this.searchIncident(params.startRow, params.startRow + dataSource.pageSize); // returns json from server
    params.successCallback(data);
  }
}

private searchIncidents() {
  dataSource.getRows({
    startRow: (this.page - 1) * this.dataSource.pageSize,
    successCallback: (data: any) => {
      this.gridOptions.api.setRowData(data);
    }
  });
}