页面刷新 - 输入，箭头键在表格单元格中不起作用

Question

IE和Chrome都会出现此问题。 这是一个带有Angular JS 4应用程序的HTML 5。我正在使用TypeScript 。 我的主要目标是在表格行中我需要键盘输入，向右和向左箭头，并将焦点设置在相应的表格单元格上

我有一个有下拉列表的页面。它有学生的名字。我还有一个单行表，如下面有多列

默认情况下，当我在下拉列表中选择学生时，会在表格中填写学生详细信息。我将每个单元格排成可编辑。因此，当用户点击行中的任何单元格并按下回车键时，我移动到下一个单元格，因此右箭头和左箭头的功能在首次加载/启动我的应用程序时正常工作。

但是当我从我的下拉列表中更换另一名学生时，我刷新页面以显示新选择的学生详细信息。从这一点开始，如果我在行中选择一个单元格，则输入键，左， 右箭头不起作用。请参阅下面的代码

非常感谢你。

<table>
   <tr>
     <td *ngFor="let item of student.classes " >
       <!-- I need to use div to make cell editable in IE. -->
       <div name='TotalDistributableQtyCell' [id]="item.cellId" 
           [contentEditable]='!isDisabled' [textContent]="item.value" 
           (keydown)="onKeydown($event, item)" 
           style="line-height:1.8em;">{{item.value}}</div>
     </td>                
  </tr>
<table>

MyComponent.ts

totalDistributableQtyCells: HTMLElement[];

ngAfterViewChecked() {
const distCells = document.getElementsByName('TotalDistributableQtyCell');
if(distCells !== null && distCells !== undefined && distCells.length > 0) {
        if(this.totalDistributableQtyCells === null || this.totalDistributableQtyCells === undefined) {
                this.totalDistributableQtyCells = [];                
            }
            for ( let i = 0 ; i < distCells.length; i++) {
                const index = this.totalDistributableQtyCells.findIndex( x =>  x.id !== undefined && x.id === distCells[i].id);
                    if(index === -1) {
                        this.totalDistributableQtyCells.push(distCells[i]);
                    }
            }
        }
}

private onKeydown(event: any, item: ITotalDistributableQuantity) {     
        const key_code = (window.event) ? event.keyCode : event.which;
        if (this.deviceInfo.browser === 'ie') {
            console.log('ie: event.keyCode ' + event.keyCode);
            switch(event.keyCode.toString()) {
                case '13':  //enter       
                event.preventDefault ? event.preventDefault() : (event.returnValue = false);   
                if(item.sequenceNumber === 2) {
                  this.totalDistributableQtyCells[1].focus();
                } else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
                  this.totalDistributableQtyCells[0].focus();
                } else if (item.sequenceNumber > 2 && item.sequenceNumber < this.totalDistributableQtyCells.length + 1) {
                  this.totalDistributableQtyCells[item.sequenceNumber - 1].focus();
                }                    
                break;       
                case '39':   //right             
                event.preventDefault ? event.preventDefault() : (event.returnValue = false);       
                if(item.sequenceNumber === 2) {
                  this.totalDistributableQtyCells[1].focus();
                } else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
                  this.totalDistributableQtyCells[0].focus();
                } else if (item.sequenceNumber > 2 && item.sequenceNumber < this.totalDistributableQtyCells.length + 1) {
                  this.totalDistributableQtyCells[item.sequenceNumber - 1].focus();
                }
                break;
                case '37': //left
                event.preventDefault ? event.preventDefault() : (event.returnValue = false);            
                if(item.sequenceNumber === 2) {
                this.totalDistributableQtyCells[this.totalDistributableQtyCells.length - 1 ].focus();
                } else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
                this.totalDistributableQtyCells[this.totalDistributableQtyCells.length - 2 ].focus();
                } else if (item.sequenceNumber > 2 && item.sequenceNumber < 11) {
                this.totalDistributableQtyCells[item.sequenceNumber - 3].focus();
                }
                break;
            }            
        }else if ( this.deviceInfo.browser === 'chrome') {  
            console.log('chrome: event.key ' + event.key);          
            switch(event.key) {
                case 'Enter':         
                event.preventDefault();
                if(item.sequenceNumber === 2) {
                    this.totalDistributableQtyCells[1].focus();
                } else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
                    this.totalDistributableQtyCells[0].focus();
                } else if (item.sequenceNumber > 2 && item.sequenceNumber < this.totalDistributableQtyCells.length + 1) {
                    this.totalDistributableQtyCells[item.sequenceNumber - 1].focus();
                }
                break;       
                case 'ArrowRight':                
                event.preventDefault();          
                if(item.sequenceNumber === 2) {
                    this.totalDistributableQtyCells[1].focus();
                } else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
                    this.totalDistributableQtyCells[0].focus();
                } else if (item.sequenceNumber > 2 && item.sequenceNumber < this.totalDistributableQtyCells.length + 1) {
                    this.totalDistributableQtyCells[item.sequenceNumber - 1].focus();
                }
                break;
                case 'ArrowLeft':
                event.preventDefault();                
                if(item.sequenceNumber === 2) {
                    this.totalDistributableQtyCells[this.totalDistributableQtyCells.length - 1 ].focus();
                } else if ( item.sequenceNumber === this.totalDistributableQtyCells.length + 1) {
                    this.totalDistributableQtyCells[this.totalDistributableQtyCells.length - 2 ].focus();
                } else if (item.sequenceNumber > 2 && item.sequenceNumber < 11) {
                    this.totalDistributableQtyCells[item.sequenceNumber - 3].focus();
                }
                break;
            }
        }
      }