Angular 无法在mat选项的自定义指令内侦听keydown事件

我正在尝试将一个指令绑定到一些mat选项，以获取这些选项上的keydown事件。该指令似乎已初始化，但似乎未响应按键关闭事件。知道为什么onKeydown功能没有启动吗

指示

    import { Directive, ElementRef, HostListener } from '@angular/core';

    @Directive({
      selector: '[appSelectTab]'
    })

    export class SelectTabDirective {

    constructor(private el: ElementRef) { console.log('init') }

    @HostListener('document:keydown', ['$event']) onKeydownHandler(event: 
    KeyboardEvent) {
    if(event.code.toLowerCase() == "tab"){
       //tab performed on the first option in the select list for example
       //this.el.nativeElement do something to or with me.
    }
    //this doesn't work because the listener is fired for all of the mat-options
}

标记：

<mat-option appSelectTab *ngFor="let schedule of maintenanceSchedule" [value]="schedule">
    {{ schedule }}
</mat-option>

{{schedule}}

---

此外，我需要执行按键按下事件的特定mat选项。

我认为您减去了

时间表。（选项）

示例

[value]=“food.value”>

<代码>*ngfor在维护计划中。发生了什么错误？或者什么都没发生

试试这个

100%工作：

---

为什么要为option设置一个keydown事件？@supercol我想在某些keydown上设置一个自定义事件Hey@Colby Boren你是否检查了我的回答不确定你的确切意思，但没有出现错误。这很接近。当我使用它时，它会在所有选项上获取一个事件。如果在第二个选项中按下enter键，您将如何获得实际选项的答案？我在原始问题的末尾添加了一行，从一开始我就应该更清楚。对不起，你如何得到一个实际的选择？你什么意思？matoption的值？？是的，elementRef将是发生键控的选项。然后您可以访问有关该对象的任何信息等。这个.el.nativeElement将为您提供元素，对吗？你可以从那里获得价值和其他东西吗？

 import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
  selector: '[appSelectTab]'
})
export class SelectTabDirective {
mouseThere=false;
constructor(private el: ElementRef) { console.log('init in directive') }
@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    if(this.mouseThere && event.code.toLowerCase() == "tab"){
      // console.log(event)
    // console.log(this.el)
    let wholeValue=this.el.nativeElement.getAttribute('ng-reflect-value').split("-");
    let value=wholeValue[0];
    let i=parseInt(wholeValue[1]);
    console.log(`You pressed tab on ${i+1} option whose value is ${value}`)

    }
}
@HostListener('mouseenter', ['$event']) mouseEnterHandler(event: MouseEvent) {
  console.log("Mouse Enter")
   // console.log(event)
    this.mouseThere=true;
}
@HostListener('mouseleave', ['$event']) mouseLeaveHandler(event: MouseEvent) {
    //console.log("Mouse leave")
    //console.log(event)
   this.mouseThere=false;
}

}