セル編集モードのAg-Grid角2キーボードナビゲーション

Question

https://www.ag-grid.com/の例のように自分でcellEditorを作成して、セルのみの入力を受け入れるようにしました。これは正常に動作しますが、キーボードナビゲーションの動作は、cellEditorを持たない通常のテキストセルとは異なります。左または右のキーを押すと、EditModeがキャンセルされ、セルを出て、入力フィールドにすべての文字を歩き回らずに別のものを選択します。私は別のものを試しましたが、うまく動作しません。この正常な動作を自分自身で達成するにはどうすればよいですかcellEditor？あなたがにonKeyDownメソッドを見ればhttps://github.com/ceolter/ag-grid-ng2-example/blob/master/systemjs_aot/app/mood-editor.component.ts

そこにあなたはそれを左/右のキーストロークを探しているとした場合だとわかります。

import {Component, ViewContainerRef, ViewChild, AfterViewInit} from '@angular/core'; 

import {AgEditorComponent} from 'ag-grid-ng2/main'; 

@Component({ 
    selector: 'numeric-cell', 
    template: `<input #input (keydown)="onKeyDown($event)" [(ngModel)]="value">` 
}) 
export class NumericEditorComponent implements AgEditorComponent, AfterViewInit { 
    private params: any; 
    public value: number; 
    private cancelBeforeStart: boolean = false; 

    @ViewChild('input', {read: ViewContainerRef}) public input: any; 


    agInit(params: any): void { 
     this.params = params; 
     this.value = this.params.value; 

     // only start edit if key pressed is a number, not a letter 
     this.cancelBeforeStart = params.charPress && ('1234567890'.indexOf(params.charPress) < 0); 
    } 

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

    isCancelBeforeStart(): boolean { 
     /*return this.cancelBeforeStart;*/ 
     return false; 
    } 

    // will reject the number if it greater than 1,000,000 
    // not very practical, but demonstrates the method. 
    isCancelAfterEnd(): boolean { 
     /*return this.value > 1000000;*/ 
     return false; 
    }; 

    onKeyDown(event: any): void { 
     if (!this.isKeyPressedNumeric(event) && !this.isKeyPressedArrow(event)) { 
      if (event.preventDefault) { 
       event.preventDefault(); 
      } 
     } 
    } 

    // dont use afterGuiAttached for post gui events - hook into ngAfterViewInit instead for this 
    ngAfterViewInit() { 
     this.input.element.nativeElement.focus(); 
    } 

    private getCharCodeFromEvent(event: any): any { 
     event = event || window.event; 
     return (typeof event.which == "undefined") ? event.keyCode : event.which; 
    } 

    private isCharNumeric(charStr: any): boolean { 
     return !!/\d/.test(charStr); 
    } 

    private isKeyPressedNumeric(event: any): boolean { 
     var charCode = this.getCharCodeFromEvent(event); 
     var charStr = String.fromCharCode(charCode); 
     return this.isCharNumeric(charStr); 
    } 

    private isKeyPressedArrow(event: any): boolean { 
     console.log("isKeyPressedArrow"); 
     var charCode = this.getCharCodeFromEvent(event); 
     console.log(charCode); 
     var bol = this.isKeyArrow(charCode); 
     console.log(bol); 
     return this.isKeyArrow(charCode); 
    } 

    private isKeyArrow(charStr: any): boolean { 
     return /^37|38|39|40/.test(charStr); 
    } 
} 

Answer 1

NG2-例レポに供給MoodEditorを見てみましょういくつかのビジネスロジックとは、あなたのための主要な部分はonKeyDown

に event.stopPropagation();を追加することです

onKeyDown(event): void { 
    let key = event.which || event.keyCode; 
    if (key == 37 || // left 
     key == 39) { // right 
     this.toggleMood(); 
     event.stopPropagation(); 
    } 
} 

PROGに停止します