Ag-Grid: доступ к узлу строки / данным в инструментах разработчика браузера.

Question

При отладке моего приложения с помощью инструментов разработчика Chrome я хотел бы иметь доступ к строке node или столбцу в данном ag-cell.

Я могу сделать это, если есть - это Angular cellRenderer (используя ng.getComponent($0), я могу получить доступ к своему компоненту Angular и params). Но возможно ли это по умолчанию cellRenderer?

Answer 1

Этот ответ работает, только если вы используете AgGrid в пределах Angular.

Я создал функцию (здесь, в Typescript), которую можно включить в код вашего приложения.

Затем вы можете вызвать его из инструментов разработчика:

• выберите элемент внутри AgGrid (который должен быть создан с использованием компонента Angular)
• в консоли , запустите 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;

Answer 2

Я бы порекомендовал простое решение: используйте обратный вызов cellClicked.

(cellClicked)="cellClicked($event)"

и в вашем компоненте:

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

Я создал StackBlitz для вашего здесь .