时间戳

首页 > 解决方案 > Detect keyboard navigation in angular material mat-selection-list

angular - Detect keyboard navigation in angular material mat-selection-list

问题描述

I want to make some actions When navigating between items using keyboard arrows.

Is there any event should i implemented? The selectionChange is fired by clicking ENTER but i want to activate the function while navigating by arrows.

<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'>

标签： angularangular-material

解决方案

您可以使用您的keydown键盘事件mat-selection-list来调用您的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 演示。

推荐阅读