角2のテーブル：キーボードの矢印を使用してケースを切り替える方法

私はウェブ開発には初めてです。私は角度2のSudokuウェブアプリを作っています。私はテーブルを実装しました。しかし、私はキーボードの矢印でそれをナビゲートすることができません。ここで角2のテーブル：キーボードの矢印を使用してケースを切り替える方法

はapp.component.htmlここ

<body> 
<div class="container"> 
<div class="col-sm-6"> 
    <table > 
      <tr *ngFor="let row of cases" class='row'> 
      <td *ngFor="let case of row" class='case'><input type="text" maxlength="1" arrowSelector> 
      </td> 
      </tr> 

    </table> 
</div> 

<div class="col-sm-6"> 
    <h3>Chronometre: 11:32</h3> 

</div> 
<div class="col-sm-2"> 

    <button type="button" class="btn btn-primary btn-block">Nouvelle partie</button> 
    <button type="button" class="btn btn-default btn-block">Réinitialiser partie</button> 


</div> 
<div class="col-sm-6"> 
    <h3>Niveau de difficulté</h3> 
    <button type="button" class="btn btn-success">Facile</button> 
    <button type="button" class="btn btn-warning">Moyen</button> 
    <button type="button" class="btn btn-danger">Difficile</button> 
</div>

ですapp.component.tsです：私は書くことがあると思う

import { Component } from '@angular/core'; 

import {ArrowSelectorDirective} from './arrowSelector.directive' 



@Component({ 

    selector: 'my-app', 

    templateUrl: 'app/app.component.html', 

    directives : [arrowSelector], 

}) 

export class AppComponent { 

    cases: number[][]; 



    constructor(){ 

this.cases =[]; 

for(var i: number =0; i<9;i++){ 

    this.cases[i] = []; 

    for(var j: number=0; j<9;j++){ 

    this.cases[i].push(1); 

    } 

} 

    } 

}

ディレクティブファイルですが、それが解決策かどうかはわかりません。

あなたは

出典

2017-01-31 charley

ここでは、入力フィールドのフィールドを介して矢印ナビとplunkerですありがとうございました。

は、次のような矢印キーのナビゲーションを実装できます。

HTML：

<table> 
    <tr *ngFor="let row of field; let i = index;"> 
     <td *ngFor="let column of row; let n = index;"><input [focus]="i === rowPos && n === columnPos" style="width: 50px; height: 50px;" (keyup)="onKey($event)" ></td> 
    </tr> 
</table>

活字体：

onKey($event){ 
    let keyCode = $event.keyCode; 

    if (keyCode === 37) { //left arrow 
    this.columnPos -= 1; 
    if (this.columnPos < 0) this.columnPos = 8; 
    }else if (keyCode === 38) { //up arrow 
     this.rowPos -= 1; 
     if (this.rowPos < 0) this.rowPos = 8; 
    }else if (keyCode === 39) { //right arrow 
     this.columnPos += 1; 
     if (this.columnPos > 8) this.columnPos = 0; 
    }else if (keyCode === 40) { //down arrow 
     this.rowPos += 1; 
     if (this.rowPos > 8) this.rowPos = 0; 
    } 
}

入力フィールドのフォーカスがディレクティブで解決されます。

import {Directive, Input, ElementRef} from '@angular/core'; 

@Directive({ 
    selector: '[focus]' 
}) 

export class FocusDirective { 
    @Input() 
    focus:boolean; 

    constructor(private element: ElementRef) {} 

    protected ngOnChanges() { 
     if (this.focus) 
     this.element.nativeElement.focus(); 
    } 

}

出典

2017-01-31 20:16:06 Batajus

@charleyこれで問題は解決しますか？それとも何か質問がありますか？ – Batajus

角2のテーブル：キーボードの矢印を使用してケースを切り替える方法

答えて

関連する問題