Question

我在同一页面上有两个ag-Grid。正确地为各个网格填充了列定义和行数据。我想使用this.agGrid.api（）调用引用这些网格。请在下面找到html代码：

<div class="row">
    <div class="col-lg-12 col-md-12">
        <ag-grid-angular id="myGrid" #agGrid style="width: 100%; height:45vh;" class="ag-theme-balham" [rowData]="rowData"
        [columnDefs]="columnDefs"></ag-grid-angular>
    </div>
</div>


<div class="row">
    <div class="col-lg-12 col-md-12">
       <ag-grid-angular id="myGrid1" #agGrid1 style="width: 100%; height:30vh;" class="ag-theme-balham" [rowData]="rowData1"
       [columnDefs]="columnDefs1"></ag-grid-angular>
    </div>
</div>

ts文件中的代码如下：

import { AgGridAngular } from 'ag-grid-angular';
class Test {

 @ViewChild('agGrid') agGrid: AgGridAngular;
 @ViewChild('agGrid') agGrid1: AgGridAngular;

  addData() {
    console.log("grid1", this.agGrid.api.getDisplayedRowCount());
    console.log("grid2", this.agGrid1.api.getDisplayedRowCount());
  }
}

以上addData（）方法中的代码未返回正确的数据。如何在同一页面上引用不同的网格？

谢谢

Answer 1

首先，在gridReady文件中使用html事件：

<ag-grid-angular  id="myGrid" #agGrid style="width: 100%; height:45vh;" 
class="ag-theme-balham" [rowData]="rowData" [columnDefs]="columnDefs"

(gridReady)="onGridReady1($event)"

></ag-grid-angular>

和gridReady文件中带有html事件的第二个表定义：

<ag-grid-angular id="myGrid1" #agGrid1 style="width: 100%; height:30vh;" 
class="ag-theme-balham" [rowData]="rowData1" [columnDefs]="columnDefs1"

(gridReady)="onGridReady1($event)">

</ag-grid-angular>

现在在ts文件中定义onGridReady函数，如下所示：

gridApi1 :any;
gridApi2 :any;
gridColumnApi1 :any;
gridColumnApi2 :any;
...

onGridReady1(params) {
 this.gridApi1 = params.api;
 this.gridColumnApi1 = params.columnApi;
}

onGridReady2(params) {
 this.gridApi2 = params.api;
 this.gridColumnApi2 = params.columnApi;
}

现在您可以在ts文件中调用任何gridApi。

角农业API引用同一页面上的不同网格

1 个答案: