Question

定义了一个ag-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>

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

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

例外：

引起：无法读取属性＆＃39; setDatasource＆＃39;未定义的

如果我删除＆＃34; * ngIf =＆＃34; rowData.length＆gt; 0＆＃34;来自HTML 搬家后。

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

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

Answer 1

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

所以，替换你的代码：

*ngIf="rowData.length > 0"

与

*ngIf="showGrid"

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

最初实例化ag-grid而不加载空网格

例外：

1 个答案: