Javascript 角度2表：如何使用键盘箭头切换案例_Javascript_Angular_Typescript

Javascript 角度2表：如何使用键盘箭头切换案例

javascript angular typescript

Javascript 角度2表：如何使用键盘箭头切换案例,javascript,angular,typescript,Javascript,Angular,Typescript,我是网络开发新手。我正在用Angular 2制作一个数独网络应用程序。我已经实现了这个表。然而，我无法通过键盘箭头导航这是app.component.html <body> <div class="container"> <div class="col-sm-6"> <table > <tr *ngFor="let row of cases" class='row'> &l

我是网络开发新手。我正在用Angular 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>


计时表：11:32
新党
Réinitialiser partie
妮沃·德·哈梅
轻率的
莫延
难以捉摸

以下是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);

  }

}

  }

 }

从'@angular/core'导入{Component}；
从“./arrowSelector.directive”导入{ArrowSelectorDirective}
@组成部分({
选择器：“我的应用程序”，
templateUrl:'app/app.component.html'，
指令：[箭头选择器]，
})
导出类AppComponent{
病例数【】【】；
构造函数（）{
这是1.cases=[]；
对于（var i:number=0；i，这里有一个箭头导航，可以通过输入字段字段进行导航
您可以按如下方式实现箭头键导航：
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();
    }

}