Angular2中带有箭头键的html列表项选择

我试图通过箭头键选择li的，但是遇到了问题。

我尝试按照此处的答案进行操作，但我的李从未被选中。

对于以下代码，我只是想使（keydown）正常工作。

这是我的：

landingpage.component.html

  
  

    

      {{list.show}}
    
  

landingpage.component.ts

arrowkeyLocation = 0;

 keyDown(event) {
   return this.arrowkeyLocation++; 
 } 

照原样，当我按下向下键时，什么也没有选择。我很确定问题出在我的html [class.active]中，但我不确定如何解决。

如何通过箭头键选择li元素？

如果您只想使用箭头键选择列表，我想您需要将其更改landingpage.component.ts为以下内容：

arrowkeyLocation = 0;

keyDown(event: KeyboardEvent) {
    switch (event.keyCode) {
        case 38: // this is the ascii of arrow up
                 this.arrowkeyLocation--;
                 break;
        case 40: // this is the ascii of arrow down
                 this.arrowkeyLocation++;
                 break;
    }
}

而在你的HTML，你需要改变[class.active]="i == {{arrowkeyLocation}}"对[class.active]="i == arrowkeyLocation"..没必要用{{和}}那里。