通过Angular中的箭头键将焦点设置在下拉自动完成选项上答案

【问题标题】：Setting focus on dropdown autocomplete option by arrow keys in Angular通过Angular中的箭头键将焦点设置在下拉自动完成选项上
【发布时间】：2019-01-28 16:01:28
【问题描述】：

我无法实现在使用this tutorial 创建的角度自动完成下拉列表中选择选项的目标。这是组件现在的样子： Dropdown with focus on hover

可以通过单击下拉选项来选择它们，它们最终会出现在输入字段中。我也希望能够通过箭头键选择选项，但我无法做到。我的代码如下所示：

autocomplete-select.component.html

<div class="form-group row" clickOutside (clickOutside)="closeAllocationDropDown()" class="pos-rel">
  <input class="form-control" type="text" id="allocation" placeholder="Zadajte časový záznam" formControlName="allocation" (click)="toggleAllocationDropDown()" autofocus="autofocus">
  <div *ngIf="showAllocationDropdown" class="dropdown" > 
    <div>
      <div (click)="selectAllocation(a.name)" class="allocation" *ngFor="let a of allocations | filterAllocation: getAllocationValue()">
          {{a.name}}
      </div>
    </div>      
  </div>
</div>

autocomplete-select.component.ts

toggleAllocationDropDown() {
    this.showAllocationDropdown = !this.showAllocationDropdown;
  }

  closeAllocationDropDown() {
    this.showAllocationDropdown = false;
  }

  getAllocationValue() {
    return this.selectForm.value.allocation;
  }

  selectAllocation(value: string) {
    this.selectForm.controls['allocation'].setValue(value);
    this.showAllocationDropdown = false;   
  }

autocomplete-select.component.scss

.dropdown {
    position:absolute;
    z-index:1;
    //max-width:100%;
    width:100%;
    max-height:300px;
    background:white;
    overflow-y:auto;
}   

.pos-rel {
    position: relative;
}

.allocation{
    padding:10py;
    font-family:sans-serif;
    color:black;
    background-color:$color-soft-grey;
}

.allocation:hover{
    background-color:$color-text;
}

input {
    cursor: pointer;
    width: 100%;
    padding: 5px;
}

我想我需要创建一个指令来设置下拉选项的焦点，但我不确定如何研究这些选项。

【问题讨论】：

The documentation 表示默认处理键盘事件。这不是你的问题吗？
虽然我没有使用 angular material 的下拉菜单。我使用的是教程中描述的定制下拉菜单，因为我需要能够将输入的样式设置为与另一个相同应用程序中的输入
我的错，草草下结论！有可能得到minimal reproducible example 吗？

标签： angular typescript sass

【解决方案1】：

你可以使用 keyup 事件来选择你想要的：

(keyup.arrowup)="selectPrevious()"
(keyup.arrowdown)="selectNext()"

【讨论】：