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

【问题标题】：html list item selection with arrow keys in Angular 2Angular 2中带有箭头键的html列表项选择
【发布时间】：2021-06-24 10:22:26
【问题描述】：

我正在尝试通过箭头键选择 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 元素？

【问题讨论】：

标签： javascript html angular html-lists

【解决方案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".. 不需要在那里使用 {{ 和 }}。

【讨论】：

这行得通！我想补充一点，您必须在 CSS 中添加一个具有一些不同属性的 .selected 元素，以便查看您当前选择的是哪个元素。
as-in，不会发生通过单击或 Tab 键突出显示列表元素的默认行为。
@samAlvin 我对水平做了同样的事情，现在当活动指针通过屏幕宽度时，它没有滚动页面。任何帮助将不胜感激。

【解决方案2】：

我同意@samAlvin 在他的回答中所说的话，我还建议使用if 条件来检查我们是否没有超过li 列表，否则如果用户按下向下箭头，选择就会消失键和向上箭头键相同：

if (event.keyCode === 40 && this.selectedLiValue < this.shows.length - 1) {
    // Arrow Down
    this.selectedLiValue++;
} else if (event.keyCode === 38 && this.selectedLiValue > 0) {
    // Arrow Up
    this.selectedLiValue--;
}

【讨论】：

谢谢！我也会实现这个。
@Dhyey 我对水平做了同样的事情，现在当活动指针通过屏幕宽度时，它没有滚动页面。任何帮助将不胜感激。

【解决方案3】：

谢谢大家。我已经实现了这个来处理它的滚动。

arrowkeyLocation = 0;
  keyDown(event: any) {
  
    if(event.keyCode=== 13){
     let valueEnterKey =this.serviceDropdown[this.arrowkeyLocation];

     console.log("valueEnterKey",valueEnterKey);
     this.dropDefaultVal1=valueEnterKey;
     this.boolval1 = !this.boolval1;
    }
   
    var listOfDropDownItemsService = document.getElementsByTagName('ul')[6];

    if (event.keyCode === 40 && this.arrowkeyLocation < this.serviceDropdown.length - 1) {
      // Arrow Down
      this.arrowkeyLocation++;
      listOfDropDownItemsService.scrollTop = listOfDropDownItemsService.scrollTop + 15;
    }
     else if (event.keyCode === 38 && this.arrowkeyLocation > 0) {
      // Arrow Up
      this.arrowkeyLocation--;
      listOfDropDownItemsService.scrollTop = listOfDropDownItemsService.scrollTop - 15;
    }

   
  }

【讨论】：