如何在 Angular 中打开下拉列表时触发键盘事件

Question

这是我的要求-

打开下拉菜单时，如果我们按键盘上的删除键，则索引应设置为-1。

一切正常，但当下拉列表聚焦时，键盘事件没有被触发。

请帮助我提供有关如何在下拉菜单打开时调用键盘事件的建议。

堆栈闪电战

Answer 1

这是问题的简单解决方案link

这里选择与 ngModel 绑定，并且检查 keyup 事件是否有删除或退格事件，然后选择默认值。

html

<select #myDropdown [(ngModel)]="selectedValue" (keyup)="onKeyUp($event)">
 <option value="0">Select Option</option>
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
</select>

并在 ts 文件中

export class AppComponent {
name = 'Angular ' + VERSION.major;
selectedValue = 0;
constructor(private elementRef: ElementRef) {}

ngAfterViewInit() {
const dropdownElement =
  this.elementRef.nativeElement.querySelector('#myDropdown');
}

onKeyUp(event: KeyboardEvent) {
if (event.key === 'Delete' || event.key === 'Backspace') {
  // Your deletion logic here
  // For example, select the next item in the list:
  this.selectedValue = 0;
}
}
}

希望这有帮助:)