Клавиши цифровой клавиатуры AG Grid при редактировании ячейки

На чтение 3 мин Опубликовано 30.09.2024

Вопрос или проблема

У меня есть пользовательский редактор ячеек, и когда я нажимаю клавишу + или NumpadAdd на клавиатуре, вызывается метод agInit с params в пользовательском редакторе ячеек, и параметры всегда дают мне значение ‘+’ в свойстве eventKey. Мне нужно различать в редакторе ячеек, была ли вызвана стандартная клавиша + или NumpadAdd. Есть ли способ получить это в редакторе ячеек?

В Angular вы можете использовать $event.code, чтобы различать разные клавиши.

@Component({
  selector: 'app-keyboard-monitor',
  templateUrl: './keyboard-monitor.component.html',
  styleUrls: ['./keyboard-monitor.component.scss']
})
export class KeyboardMonitorComponent {
  @HostListener('window:keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent) {
    console.log(`code: ${event.code}`);
  }
}

	клавиша	код клавиши
Обычный +	+	Equal
Numpad +	+	NumpadAdd

Ответ или решение

Чтобы отличить стандартный символ + от нажатия клавиши NumpadAdd в вашем пользовательском редакторе ячеек AG Grid, вы можете воспользоваться свойством event.code, как вы и упомянули. Это свойство даёт вам возможность выявлять конкретные клавиши, которые были нажаты, что позволяет лучше контролировать поведение вашего редактора.

Вот как вы можете реализовать эту функциональность:

Создание пользовательского редактора: В вашем пользовательском редакторе ячеек AG Grid в методе agInit вы можете добавить слушатель событий клавиатуры:

import { Component, HostListener } from '@angular/core';
import { ICellEditorAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-custom-cell-editor',
  template: `<input [(ngModel)]="value" (keydown)="onKeyDown($event)" />`,
})
export class CustomCellEditorComponent implements ICellEditorAngularComp {
  private params: any;
  public value: string;

  agInit(params: any): void {
    this.params = params;
    this.value = this.params.value; // Инициализация значения
  }

  getValue(): any {
    return this.value;
  }

  // Обработка нажатий клавиш
  onKeyDown(event: KeyboardEvent): void {
    if (event.code === 'NumpadAdd') {
      // Обработка нажатия клавиши Numpad +
      console.log('Нажата клавиша Numpad +');
    } else if (event.code === 'Equal') {
      // Обработка нажатия клавиши стандартного +
      console.log('Нажата обычная клавиша +');
    }
  }
}

Использование свойства event.code: В методе onKeyDown вы можете проверять значение event.code. Например, для стандартной клавиши + значением будет Equal, а для Numpad + – NumpadAdd. Таким образом, вы сможете легко различить действия пользователя.
Регистрация нажатий клавиш: Не забудьте зарегистрировать ваш компонент в модуле Angular и убедиться, что он используется в сетке AG Grid правильно.

Этот подход позволяет вам обрабатывать нажатия клавиш непосредственно в редакторе ячеек и принимать соответствующие меры в зависимости от того, какая клавиша была нажата. Таким образом, вы полностью контролируете поведение вашего пользовательского редактора и можете реагировать на разные клавиши клавиатуры.

Если у вас есть дополнительные вопросы по этой теме или нужна помощь с другим фрагментом кода, пожалуйста, дайте знать!