контекстная кнопка контекстного меню ag-grid не работает

Question

надеюсь, это будет полезно для кого-то еще. Я использую функцию контекстного меню ag-grid enterprise. Я хотел иметь комбинацию клавиш, соответствующую пунктам меню, но ничего не произошло, когда я нажал комбинацию клавиш.

Чтобы сделать его более запутанным (для меня), их собственный пример того, как это сделать, не работает:

https://www.ag -grid.com / javascript-grid-context-menu /

Answer 1

Проблема в том, что атрибут ярлыка только перечисляет ярлык, но ничего не запускает. Вы также должны написать обработчик события для события cellKeyDown, чтобы отслеживать ярлык:

import { Component } from '@angular/core';
import { GetContextMenuItemsParams } from 'ag-grid-community';

@Component({
  selector: 'app-root',
  template: 
  `
    <ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham"
    [rowData]="rowData" [columnDefs]="columnDefs"
    [getContextMenuItems]="getContextMenuItems"
    (cellKeyDown)="onCellKeyDown($event)">
    </ag-grid-angular>
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ag-grid-import-excel';

  columnDefs = [
      {headerName: 'Make', field: 'make' },
      {headerName: 'Model', field: 'model' },
      {headerName: 'Price', field: 'price'}
  ];

  rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];

  getContextMenuItems(params:GetContextMenuItemsParams ) {
    return [
      'copy', 
      'copyWithHeaders', 
      'paste',
      'separator', 
      {
        name: "insert",
        shortcut: "Alt + i",
        action: function() {
          console.log("insert");
        },
        icon: '<i class="fas fa-plus"></i>'
      },
      'export',
    ];
  }

  onCellKeyDown($event) {
    let event:KeyboardEvent = $event.event;
    if (event.altKey && event.key === "i") {
      console.log('alt i pressed')
    }
  }
}