在不加载空网格的情况下实例化 ag-grid答案

【问题标题】：Instantiating ag-grid without loading empty grid initially在不加载空网格的情况下实例化 ag-grid
【发布时间】：2017-08-03 04:12:49
【问题描述】：

定义了一个ag-grid，只有当grid有内容时才会出现数据。

//HTML文件

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

<div class="col-md-12" *ngIf="rowData.length > 0">
    <ag-grid-angular #agGrid style="width: 100%; height: 330px;" class="ag-fresh"
        [gridOptions]="gridOptions"
        [columnDefs]="columnDefs"    
        [rowData]="rowData"
        [datasource] = "dataSource"
        enableColResize
        enableSorting
        enableFilter
        rowSelection="single"
    ></ag-grid-angular>
</div>

在组件中，我在构造函数中定义了夹点选项，并在搜索方法中初始化了数据源，这将要求提交表单。

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

    });


    this.gridOptions = <GridOptions>{
        context:{},
        rowModelType: 'pagination',
        enableServerSideFilter: true,
        paginationPageSize: 10,
        rowData: this.rowData,
        columnDefs: this.columnDefs,
        onReady: () => {
            this.gridOptions.api.sizeColumnsToFit();
        }


    };

}

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=>{
                    self.gridOptions.api.setRowData(res.json().result.incidentHdr);
                    self.rowData = res.json().result.incidentHdr;
                    var rowsselfPage = self.rowData;
                    var lastRow = -1;
                    params.successCallback(rowsselfPage, res.json().result.totalRecords);
                 });
        }
      } 

      //this.gridOptions.datasource = dataSource;
      this.gridOptions.api.setDatasource(dataSource);
     }

例外：

原因：无法读取未定义的属性“setDatasource”

如果我从 html 中删除 "*ngIf="rowData.length > 0"，这个异常将会解决删除后。

<div class="col-md-12">
    <ag-grid-angular #agGrid style="width: 100%; height: 330px;" class="ag-fresh"
        [gridOptions]="gridOptions"
        [columnDefs]="columnDefs"    
        [rowData]="rowData"
        [datasource] = "dataSource"
        enableColResize
        enableSorting
        enableFilter
        rowSelection="single"
    ></ag-grid-angular>
</div>

但这里的问题是网格会在搜索之前加载，这不是必需的。如何在不加载空网格的情况下实现这一点。

【问题讨论】：

标签： angular typescript ag-grid

【解决方案1】：

我有一些页面，在填充网格之前我不想在这些页面上看到它。我使用了一个名为 showGrid 的布尔值，设置为 false。

所以，在你的代码中替换：

*ngIf="rowData.length > 0"

与

*ngIf="showGrid"

当您准备好查看网格时，在代码中将 showGrid 设置为 true。

【讨论】：