angular - 数据源未在 ag 网格中执行

Question

已经实现了一个 ag-grid，并定义了一个数据源。

但是数据源没有被调用，数据源将如何执行

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

组件被定义为网格

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

        }
    }

在 html 中点击搜索按钮试图调用网格，这是不成功的。

搜索事件(){

//html搜索按钮

---

搜索

这是控制台中出现的一个警告除非使用普通行模型，否则无法调用 setRowData

添加了一个不完整的 plnkr http://plnkr.co/edit/qIeONaAe4INyTuZTGAOK?open=app%2Fapp.component.ts&p=preview

Answer 1

尝试以下代码，采用引用形式 https://www.ag-grid.com/example-angular-dynamic/#dynamic&gsc.tab=0

dataSource 将有一个回调，它将在网格上呈现数据。this.gridOptions.api.setRowData(data);负责刷新网格数据。

执行 AJAX 的方法应该返回响应，因为我们将在 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);
    }
  });
}