angular agrid API 引用同一页面上的不同网格

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() 方法中的上述代码未return 更正数据。如何在同一页面上引用不同的网格？

谢谢

Answer 1

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

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

和 html 文件中 gridReady 事件的第二个 table 定义：

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

angular agrid API 引用同一页面上的不同网格

angular agrid API to refer to different grid's on the same page

ag-grid

angular

ag-grid-angular