如何在angular2的ag网格中获取选定行的数据？答案

【问题标题】：How to get the data of selected row in ag grid in angular2?如何在angular2的ag网格中获取选定行的数据？
【发布时间】：2016-05-19 11:16:06
【问题描述】：

我在 angular2 中设置了 ag-grid，它工作正常，但我无法获取所选行的值...我的控制台窗口中没有错误...这就是我初始化网格的方式.. .

import {Component} from 'angular2/core';


@Component({
selector: 'aggride',
template: `

<div class="tr-card" >
<ag-grid-ng2  #agGrid of mgrid   class="ag-fresh"   rowHeight="40px"    
               [columnDefs]="columnDefs" 
                [rowData] = "rowData"
     enableCellExpressions="true"  
 enableSorting="true"  
  unSortIcon="true"
rowSelection="single"
(getSelectedRows) = "getSelectedRows()"
(onSelectionChanged) = "onSelectionChanged()"
>
</ag-grid-ng2>
</div>
`,
directives: [(<any>window).ag.grid.AgGridNg2],
})

这是我在类中获取所选值的代码

export class AgGride {
gridOptions = {
    columnDefs: 'columnDefs',
    rowData: 'rowData',
    rowSelection: 'single',
    getSelectedRows: 'getSelectedRows',
    onSelectionChanged: 'onSelectionChanged'
};

columnDefs = [
    { headerName: "Make", field: "make", editable: true },
    { headerName: "Model", field: "model", editable: true },
    { headerName: "Color", field: "Color", editable: true }
];

rowData = [
    { make: "Toyota", model: "Celica", Color: "Red"},
    { make: "Ford", model: "Mondeo", Color: "Blue"},
    { make: "Tata", model: "X100", Color: "Blue"},
    { make: "Volvo", model: "X5", Color: "White"},      
];

mgrid: any;
onSelectionChanged() {
    var selectedRows = this.mgrid.ag.this.gridOptions.getSelectedRows();
    console.log(selectedRows);


}
}

请告诉我如何纠正我的错误，以便我在控制台窗口中获取所选行的数据/值...

【问题讨论】：

标签： angular typescript ag-grid

【解决方案1】：

在模板上，例如：

(rowClicked)='onRowClicked($event)'
(cellClicked)='onCellClicked($event)'
(selectionChanged) = 'onSelectionChanged($event)'

然后在组件类上：

onRowClicked(event: any) { console.log('row', event); }
onCellClicked(event: any) { console.log('cell', event); }
onSelectionChanged(event: any) { console.log("selection", event); }

使用 Chrome 控制台检查事件对象的内容。

【讨论】：

如果您曾经使用 chrome 控制台检查事件对象内容，您会发现 onSelectionChanged 不包含有关选定节点的信息。

【解决方案2】：

您可以使用 api.getSelectedRows() 返回所选行数据的数组。

 public getSelectedRows(){
        let rowsSelection = this.gridOptions.api.getSelectedRows();
        console.info(rowsSelection);
      }

这对我有用。

【讨论】：

【解决方案3】：

onRowSelected: params => {
  const selectedRows = params.api.getSelectedRows();
  console.log(selectedRows);
}

【讨论】：

【解决方案4】：

在您的 HTML 中将 rowClicked 事件绑定到您自己的函数，如下所示。

 <ag-grid-angular #grid
      style="width: 100%; height: 500px;" class="ag-theme-balham"
      [rowData]="rowList" [columnDefs]="columnsList" [rowSelection]="selectionMode"
      (rowClicked)="onRowClick($event)"
    >
    </ag-grid-angular>

然后在您的 TS 或您的 JS 中按如下方式使用 api

onRowClick(event) {
    if (this.selectionMode === 'multiple') {
      this.selectedEntity = this.grid.api.getSelectedRows();
    } else {
      this.selectedEntity = this.grid.api.getSelectedRows()[0];
    }
}

当您的网格具有多项选择等功能时，所有选定的数据都不会通过event 参数传递。它将始终仅是选定的行。

我不鼓励selectionChanged 事件的原因是，它总是会在selectionChanged 事件之前调用rowClicked 事件。

【讨论】：

【解决方案5】：

如果您使用的是onSelectionChanged()，您可以使用api.getSelectedRows() 从onSelectionChanged 函数中获取选定的数据。

selectedRow: any;
canceLDateAGGrid() {
    this.dateGridOptions = {
        columnDefs: [{
            headerName: this.Label[0].GEN_ORG_lblName,
            field: 'DependantName',
            width: 200,
            filter: 'agTextColumnFilter'
        }, ],
        showRowSelection: true,
        checkboxSelection: false,
        onSelectionChanged: (event) = > this.onSelectionChanged(event),
    };
}
onSelectionChanged(event) {
    let selectdata = event.api.getSelectedNodes();
    this.selectedRow = event.api.getSelectedRows();
    console.log(this.selectedRow)
}

【讨论】：

【解决方案6】：

首先，必须通过将gridOptions.rowSelection 设置为"single" 或"mulitple" 来启用行选择，具体取决于您要实现的选择行为。

然后您可以使用网格 API 方法 getSelectedNodes() 返回 ag-Grid 中所有当前选定行的列表。从每个节点提取数据就像映射每个节点并返回其数据属性一样简单。

这是使用 JavaScript 框架时的代码：

getSelectedRowData() {
    let selectedNodes = this.gridApi.getSelectedNodes();
    let selectedData = selectedNodes.map(node => node.data);
    alert(`Selected Nodes:\n${JSON.stringify(selectedData)}`);
    return selectedData;
}

您还可以在下面的 Angular/React/Vue.js 示例中看到这一点：

Angular

React

Vue.js

Vanilla JS
注意：使用 Vanilla JS 时，gridApi 和 columnApi 可以从 gridOptions 对象访问。

阅读我们blog 上的完整帖子或查看我们的documentation，了解您可以使用 ag-Grid 实现的各种场景。

艾哈迈德·加迪尔 |开发者@ag-Grid

【讨论】：