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

Question

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

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

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

这是我的：

landingpage.component.html

<div class="searchArea">
  <input type="text" autoComplete="off" (keydown)="keyDown($event)" placeholder={{backgroundPlaceholder.info.placeholderText}} [(ngModel)]="keystroke"
    (ngModelChange)="getKey($event)">
  <div class="results-list">
    <li *ngFor="let list of shows; let i = index" [class.active]="i == {{arrowkeyLocation}}">
      <span class="result">{{list.show}}</span>
    </li>
  </div>
</div>

landingpage.component.ts

arrowkeyLocation = 0;

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

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

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

Answer 1

如果您只想使用箭头键选择列表，我想您需要将其更改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"..没必要用{{和}}那里。