angular - 如何使用 Angular 6 在单个组件中渲染多个 ag-grid
问题描述
我在 html 页面中有多个 ag-grid,我想在组件中获取 ag-grid 的特定行值。
html
<ag-grid-angular #agGrid1 style="width: 1250px; margin-left: 5px ; height:120px;background-color: #CFD8DC;"
class="ag-theme-balham" [rowData]="rowsData1" [columnDefs]="cols" rowSelection="multiple"
[enableCellChangeFlash]="true">
</ag-grid-angular>
<ag-grid-angular #agGrid2 style="width: 1250px; margin-left: 5px ; height:120px;background-color: #CFD8DC;"
class="ag-theme-balham" [rowData]="rowsData2" [columnDefs]="cols2" rowSelection="multiple"
[enableCellChangeFlash]="true">
</ag-grid-angular>
组件.ts
@ViewChild('agGrid1', { static: true }) agGrid: AgGridAngular;
@ViewChild('agGrid2', { static: true }) agGrid2: AgGridAngular;
getRowsData() {
this.selectedRows1 = this.agGrid.api.getSelectedRows();
this.selectedRows2 = this.agGrid2.api.getSelectedRows();
console.log( this.selectedRows1, this.selectedRows2)
}
在这里,我试图获取两个 ag-grid 行的值,但我得到:
错误类型错误:无法读取未定义错误的属性“api”。
解决方案
完成 Ag-Grid 设置
我试过下面的代码,绑定网格正确的方式
在您的 HTML 文件中
<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
[columnDefs]="columnDefs" [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
[columnDefs]="columnDefs" [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)"
(gridReady)="onGridReady1($event)"
>
</ag-grid-angular>
并在 app.component.ts 文件中
private gridApi;
private gridColumnApi;
private gridApi1;
private gridColumnApi1;
rowSelection = "single";
columnDefs = [
{ headerName: "Make", field: "make" },
{ headerName: "Model", field: "model" },
{ headerName: "Price", field: "price" }
];
rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 }
];
onSelectionChanged() {
var selectedRows = this.gridApi.getSelectedRows();
var selectedRows1 = this.gridApi1.getSelectedRows();
console.log(selectedRows);
console.log(selectedRows1);
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
}
onGridReady1(params) {
this.gridApi1 = params.api;
this.gridColumnApi1 = params.columnApi;
}
我能够在onSelectionChanged()
方法中获得网格的两个值
这是输出屏幕
如果您对上述内容有任何问题,请告诉我
谢谢
推荐阅读
- magento2 - 如何在magento 2中付款后修复Error return url错误
- regex - 如何在 GIT reflog 中的 --grep 中使用 REGEX?
- c++ - 覆盖 Qt 的 mousePressEvent 会中断 moveEvent 参数
- highcharts - 如何使 highcharts 以 hh:mm:ss 格式显示日期,而不是时间戳?
- amazon-web-services - 覆盖不属于存储桶所有者的 S3 对象文件的权限
- javascript - 如何更新 js 项目的 package.json 文件中的 nexsus 依赖项
- excel - Excel公式选择2列之间的差异,但前提是差异小于1
- regex - 正则表达式匹配最后一次出现之前
- python - 使用 websocket 的龙卷风/异步问题
- python - 我可以使用 python-pptx 获取占位符的默认字体大小吗?