通过双击由 angular 11 编写的行来检索我的 ag-grid 的行数据的问题

Posted 2023-03-28

【中文标题】通过双击由 angular 11 编写的行来检索我的 ag-grid 的行数据的问题

【英文标题】：Problem with retrieving row data of my ag-grid by double clicking the row, written by angular 11

【发布时间】：2021-05-23 18:29:16

【问题描述】：

我在我的 Angular 项目中使用了 ag 网格。我想检索双击的行数据并将其复制到一个变量中，但最后它显示的是 [object Object] 而不是我的行数据。

这是我的代码：

.html文件：

<p>data:rowsSelection</p>
<ag-grid-angular    style="width: 100%; height: 500px;"
                    class="ag-theme-balham"
                    [rowData]="rowdata"
                    [columnDefs]="gridOptions.columnDefs"
                    [defaultColDef]="gridOptions.defaultColDef"
                    [enableRtl]="agGridPropeties.enableRTL"
                    [localeText]="localeTextPersian"
                    [rowSelection]="agGridPropeties.rowSelection"
                    [multiSortKey]="agGridPropeties.multiSortKey"
                    [pagination]="agGridPropeties.pagination"
                    [paginationPageSize]="agGridPropeties.paginationPageSize"
                    enableCharts="true"
                    rowDragManaged="true"
                    animateRows="true"
                    [sideBar]="sideBar"
                    (rowClicked)='onRowClicked($event)'
                    (cellClicked)='onCellClicked($event)'
                    (selectionChanged) = 'onSelectionChanged($event)'
                    (rowDoubleClicked) = 'onRowDoubleClicked($event)'
                    >
</ag-grid-angular>

.ts 文件：

constructor(private auth: AuthenticationService) 
  this.newData();


public newData() 
  this.auth.getallunits().subscribe(result => 
    this.rowdata = result.data;
  );


public onRowDoubleClicked(event: any)  
  this.rowsSelection = 'data':event;
  console.log('doubleClicked': event);

在控制台中我可以看到数据，但在 p 标签内我看到 [object Object]！

这是 console.log 结果：

doubleClicked:
api: GridApi detailGridInfoMap: …, destroyCalled: false, immutableService: ImmutableService, csvCreator: CsvCreator, excelCreator: null, …
columnApi: ColumnApi columnController: ColumnController
context: undefined
data: Unit_Code: 20003, Unit_Title_Persian: "بسته 4 عددی", Conversion_factor: 4, Parent_Unit_ID: 10001
event: MouseEvent isTrusted: true, screenX: 1025, screenY: 866, clientX: 1025, clientY: 763, …
node: RowNode childrenMapped: …, selectable: true, __objectId: 4, alreadyRendered: true, highlighted: null, …
rowIndex: 3
rowPinned: undefined
source: RowComp destroyFunctions: Array(37), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …
type: "rowDoubleClicked"
__proto__: Object
__proto__: Object

在我的p 标签内：

data:[object Object]

你有什么想法吗？

【参考方案1】：

事件处理程序应该是

onRowDoubleClicked(row)  
  this.rowsSelection = data: row.data;
  console.log('doubleClicked', row.data);

【参考方案2】：

我们应该使用event.node.data 而不是event：

public onRowDoubleClicked(event: any)  
  this.rowsSelection = event.node.data.Unit_Code;
  console.log('doubleClicked': event.node.data);