Estoy trabajando con una tabla PrimeNG y estoy tratando de seleccionar la fila de pSelectableRow una tecla.
Tengo una entrada de búsqueda global que filtrará todos los resultados de la tabla, y cuando el usuario termine de buscar, me gustaría que pudiera hacer clic en un botón del teclado y seleccionar la fila de las opciones filtradas.
Actualmente, si un usuario está buscando y el cuadro de entrada tiene el foco, puede presionar el tab , pero debe presionar 5 veces para llegar a la primera fila (más si hay más columnas).
¿Es posible seleccionar un elemento de fila dentro del componente de la aplicación a través de mecanografiado u otro método en el que, al presionar una tecla, se seleccionaría la primera fila? Luego, por supuesto, el usuario podría presionar enter para seleccionar la fila. Las flechas hacia arriba y hacia abajo funcionan una vez que las filas están activas, pero primero debe llegar a las filas.
Configuré una función de tecla de acceso rápido dentro de mi aplicación para que la tecla f1 active un evento:
this.addShortcut({ keys: 'f1' }).subscribe(() => { this.showMessage(); console.log(this.table.value); }); Esto muestra un mensaje del servicio de mensajes PrimeNG para asegurarse de que la tecla de acceso rápido esté funcionando y también está registrando el valor de la tabla en la consola. Revisé la table y no parece haber ninguna forma de seleccionar una fila. He intentado configurar this.table.selection = this.table.value[1] y esto almacena el elemento de matriz [1] como el "valor seleccionado", pero esto en realidad no selecciona ningún elemento de la tabla.
¿Hay una mejor manera de hacer esto? Para simplificar el código requerido para hacer esto reproducible en StackOverflow, he incluido un stackblitz en su lugar. Aquí hay un stackblitz.
Si agrega [(selection)]="selectedProduct" (onFilter)="onFilter($event, dt)" a la declaración de su tabla en su componente, entonces puede administrar su selección de tabla cada vez que el usuario realiza una búsqueda de esta manera:
onFilter(event, dt) { if (event.filteredValue.length > 0) { this.selectedProduct = event.filteredValue[0]; // set first visible row as selected } }Ver StackBlitz
¿Es esto lo que estás buscando?
Editar:
Ok, espero haber entendido tu necesidad. Agregué tres HostListener para navegar a lo largo de los datos filtrados y ejecutar una acción mientras presionaba la tecla Intro :
@HostListener('keydown.ArrowUp', ['$event']) ArrowUp($event: KeyboardEvent) { if (this.cpt > 0) { this.cpt--; } this.selectedProduct = this.visibleProducts[this.cpt]; } @HostListener('keydown.ArrowDown', ['$event']) ArrowDown( $event: KeyboardEvent ) { if (this.cpt < this.visibleProducts.length - 1) { this.cpt++; } this.selectedProduct = this.visibleProducts[this.cpt]; } @HostListener('keydown.Enter', ['$event']) Enter($event: KeyboardEvent) { alert('opening product: ' + this.selectedProduct.name); } Y ahora, el método onFilter se ve así:
onFilter(event, dt) { this.cpt = 0; if (event.filteredValue.length > 0) { this.selectedProduct = event.filteredValue[0]; this.visibleProducts = event.filteredValue; } }