ag-grid上下文菜单快捷键不起作用

Question

希望这对其他人有所帮助。我正在使用 ag-grid 企业的上下文菜单功能。我想有一个与菜单项对应的快捷键，但是当我按下组合键时没有任何反应。

为了让（对我来说）更加混乱，他们自己的示例如何做到这一点不起作用：

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')
    }
  }
}