Question

拥有一个ag-grid的表单，即使基本网格正常工作，它也会在控制台

中出错

除非使用普通行模型，否则
无法调用setRowData

因此大多数api功能包括明确无法正常工作。

 <form [formGroup]="myForm" (ngSubmit)="search()" >
    <button type="submit" class="btn btn-primary ripple">Search</button>
  </form>

  <div class="grid-wrapper animated fadeIn" >
         <ag-grid-angular #agGrid style="width: 100%; height: 315px;" class="ag-fresh"
         [gridOptions]="gridOptions"
         [columnDefs]="columnDefs"    
         [rowData]="rowData"
         [datasource] = "dataSource"
         enableColResize
         rowSelection="single"
         ></ag-grid-angular>
   </div>

键入sript代码，在构造函数定义的网格和搜索方法中设置从服务器api返回的数据。除了调用分页的回调方法。

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

});


this.gridOptions = <GridOptions>{
    context:{},
    rowModelType: 'pagination',
    paginationPageSize: 10,
   //  onGridReady: function(event) {  this.gridOptions.api.sizeColumnsToFit(); } // this will give  error api undefined 
};

}  

 search(){
 let self = this;
 let dataSource = {
   paginationPageSize: 10,
   getRows: (params: any) => {
          let headers: Headers = new Headers();
          headers.set("Content-Type", "application/json");
            console.log("here dataSource");
            this.formatReqData(params.startRow, params.endRow);
             this.http.post(AppUtils.INCIDENT_SEARCH, this.myForm.value, {headers: headers}).subscribe(res=>{ // server call
                 if(res.json().result!= null){
                    self.gridOptions.api.setRowData(res.json().result.paginatedList);
                    self.rowData = res.json().result.paginatedList;
                    var rowsselfPage = self.rowData;
                    var lastRow = -1;
                    params.successCallback(rowsselfPage, res.json().result.totalRecords);
                 }else{
                     self.gridOptions.api.setRowData(null);
                     self.rowData = null;
                 }
             });
    }

相关问题

如果我添加此条件 ngIf="rowData.length" 以停止显示空网格，则网格将不会随时加载。

    <div class="grid-wrapper animated fadeIn" *ngIf="rowData.length > 0">
     <ag-grid-angular #agGrid style="width: 100%; height: 315px;" class="ag-fresh"
     [gridOptions]="gridOptions"
     [columnDefs]="columnDefs"    
     [rowData]="rowData"
     [datasource] = "dataSource"
     enableColResize
     rowSelection="single"
     ></ag-grid-angular>
  </div>

Answer 1

由于rowModelType设置为＆＃39; pagination＆＃39;，因此您无法使用setRowData（）方法更改网格数据。而是创建另一个设置空数据的本地数据源，然后将其用作网格的数据源。示例如下：

clear(){
    let self = this;
    let dataSource = {
        getRows(params:any) {
            params.successCallback([],0);
        }
    };
    this.gridOptions.api.setDatasource(dataSource);
}

Answer 2

 this.gridOption = <GridOption>{
    context:{},
    rowModelType: 'pagination',
    paginationPageSize: 10,
    rowModelType='normal' 
 }

尝试上面的代码并使用ngshow和ngif，两者都具有相同的条件。

除非在ag-grid中使用正常的行模型错误，否则无法调用setRowData

2 个答案: