javascript - 在 Angular 2 中使用箭头键选择 html 列表项

Question

我正尝试通过箭头键选择 li，但遇到了问题。

我试着按照答案 here , 但我的 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".. 不需要在那里使用 {{ 和 }}。