html - 通过双击由 angular 11 编写的行来检索我的 ag-grid 的行数据的问题
问题描述
我在我的角度项目中使用了 ag grid。我想检索双击的行数据并将其复制到一个变量,但最后它显示 [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]
你有什么主意吗?
解决方案
事件处理程序应该是
onRowDoubleClicked(row) {
this.rowsSelection = {data: row.data};
console.log('doubleClicked', row.data);
}
推荐阅读
- meteor - 如何获取服务器上的当前路由?
- c# - 链接异步/等待
- kubernetes - GKE:查看有关某人权限的详细信息
- php - 使用正则表达式检测字符串是否存在
- javascript - minDate 没有被设置?
- jquery - 如何在按钮单击事件中检查文件是否上传到 dropzone?
- java - 下载文件时 HttpUrlConnection 中的“IllegalsStateException closed”
- qt5 - 翻译编译时未知的字符串
- tensorflow - Tensorflow:是否可以识别用于训练的数据?
- c# - 如何在 xamarin 中将照片从图库保存到 Windows 服务器上的共享文件夹