Ag-Grid：访问浏览器开发人员工具中的行节点/数据

Question

使用Chrome的开发工具调试应用程序时，我希望能够访问给定ag-cell上的行node或列。

如果有AngularcellRenderer，我可以这样做(使用ng.getComponent($0)，我可以访问我的Angular组件和params(。但默认的cellRenderer可能吗？

Answer 1

我推荐一个简单的解决方案：使用cellClicked回调。

(cellClicked)="cellClicked($event)"

并且在您的组件中：

cellClicked(params)
{
console.log(params.node)
}

我在这里为您创建了一个StackBlitz。

Answer 2

只有在Angular中使用AgGrid时，此答案才有效

我创建了一个函数(在Typescript中(，可以包含在您的应用程序代码中。

然后您可以从开发工具调用它：

• 在AgGrid中选择一个元素(必须使用角度组件创建(
• 在控制台中，运行getAgGridCellInfo($0)(如您所称的ng.getComponent($0)(

要复制到应用程序代码中的代码：

/**
* For Dev tool's console, provides an easy access to a cell's Node and column.
* Just :
*  * select an element inside the AgGrid (which must be created using an <ag-grid-angular> Angular Component)
*  * in the console, run getAgGridCellInfo($0)    (as you would call ng.getComponent($0))
*
* @param element HTMLElement ($0 usually)
* @return an object with some information on the row, column and cell
*/
function getAgGridCellInfo(element: HTMLElement) {
if (!element) {
console.error('Call with $0 parameter, after selecting a DOM element inside an AgGrid');
return;
}
function getInheritedAttribute(el: HTMLElement, attributeName: string) {
if (!el) {
throw new Error('Could not find attribute ' + attributeName + ' in parents of ' + element);
}
const elVal = el.getAttribute(attributeName);
return elVal != null ? elVal : getInheritedAttribute(el.parentElement, attributeName);
}
function getAgGridCompontent(el: HTMLElement) {
const comp = window['ng'].getComponent(el);
return comp && comp.constructor.name === 'AgGridAngular' ? comp : getAgGridCompontent(el.parentElement);
}
const rowId = getInheritedAttribute(element, 'row-id');
const colId = getInheritedAttribute(element, 'col-id');
const agGridComp = getAgGridCompontent(element);
const api: GridApi = agGridComp?.api;
const rowNode = api?.getRowNode(rowId);
const colDef = api?.getColumnDef(colId);
const value = colDef && rowNode && api.getValue(colId, rowNode);
return {
api: api,
rowId: rowId,
colId: colId,
rowNode: rowNode,
colDef: colDef,
value: value,
data: rowNode?.data
};
}
window['getAgGridCellInfo'] = getAgGridCellInfo;