在角材垫选择列表中检测键盘导航

Question

使用键盘箭头在项目之间导航时，我想采取一些措施。

我应该执行任何事件吗？ 通过单击ENTER可以触发selectionChange，但是我想在通过箭头导航时激活该功能。

<mat-selection-list #list (selectionChange)="selectionChange($event, list.selectedOptions)">
  <mat-list-option (mouseenter)="showEditIcon(true, i)" (mouseleave)="showEditIcon(false, i)"
                   *ngFor="let lotItem of lotList; let i = index;"
                   (click)="showLotDetails(lotItem, i)"
                   [value]='lotItem'>

Answer 1

您可以在mat-selection-list上使用keydown键盘事件来调用selectionChange()方法。 您需要同时添加(keydown.arrowup)和(keydown.arrowdown)事件处理程序。

<mat-selection-list #list 
       (selectionChange)="selectionChange($event, list.selectedOptions)"
       (keydown.arrowup)="selectionChange($event)" 
       (keydown.arrowdown)="selectionChange($event)">

    <mat-list-option (mouseenter)="showEditIcon(true, i)" (mouseleave)="showEditIcon(false, i)"
                   *ngFor="let lotItem of lotList; let i = index;"
                   (click)="showLotDetails(lotItem, i)"
                   [value]='lotItem'>

这是一个StackBlitz演示 。