angular - ag grid sayfalama çalışmıyor, başlangıçta sunucu çağrısını iki kez yapıyor

Sayfadaki arama düğmesine tıklamak, sunucu çağrısından sonuç döndürecek ve bunu ag grid'de görüntülemelidir. Her tıklamada sayfalama detayları sunucuya gönderilecek ve sunucu yalnızca o kadar kaydı istemciye döndürecektir.

Ag grid'i uyguladım ama aramaya tıkladıktan sonra grid yüklenmiyor. Nerede yanlış yaptığımı bulmama yardımcı olabilir misiniz?

Bu html, ızgara bölümü ve arama butonudur.

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

Bileşen

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

    }

//bu veri kaynağı çağrıldığında

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

//sunucu çağrısı yapar ve json verisini döndürür.

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

    }
}

Denenen çözüm (çalışmıyor)

arama düğmesine tıklanıldığında ızgarayı bu şekilde çağırmak

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

Sunucu tarafı sayfalandırmayı etkinleştirmek için veri kaynağı eklemiştim, peki bu veri kaynağını nasıl çağırabilirim?

Ag-grid sayfalama konusunda herhangi bir yardım? Veri kaynağı nasıl yüklenir?

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

Cevap #1

Bence ag-grid'i @ngmodules ana modülünün içine ithal etmeniz gerekecek

içeri aktar

@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
    ]
})

İlgili makaleler