angular - Seleccionar filas en la tabla de PrimeNG con pulsación de tecla

Estoy trabajando con una tabla de PrimeNG y estoy intentando seleccionar la fila de un pSelectableRow mediante la pulsación de una tecla.

Tengo un campo 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 que se seleccione la fila de las opciones filtradas.

Actualmente, si un usuario está buscando y el cuadro de entrada tiene el enfoque, puede presionar tab, pero debe presionarlo 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 mediante TypeScript u otro método, de manera que al presionar una tecla, se seleccione la primera fila? Luego, por supuesto, el usuario podría presionar enter para seleccionar realmente la fila. Las flechas hacia arriba y hacia abajo funcionan una vez que las filas están activas, pero primero necesitas acceder a las filas.

He configurado una función de tecla rápida 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 está mostrando un mensaje del servicio de mensajes de PrimeNG para asegurarse de que la tecla rápida está funcionando, y también está registrando el valor de la tabla en la consola. He revisado el table y no parece haber ninguna manera de seleccionar una fila. He intentado establecer this.table.selection=this.table.value[1] y esto sí guarda el elemento del arreglo [1] como el "valor seleccionado", pero esto no selecciona realmente ningún elemento de la tabla.

¿Hay una mejor manera de hacer esto? Para simplificar el código necesario para que esto sea reproducible en StackOverflow, he incluido un stackblitz en su lugar. Aquí hay un stackblitz.

Respuesta #1

Si agregas [(selection)]="selectedProduct" (onFilter)="onFilter($event, dt)" a la declaración de tu tabla en tu componente, entonces puedes gestionar la selección de tu 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 eso lo que estás buscando?

Editar:

Ok, espero haber entendido tu necesidad. Agregué tres HostListener para navegar a través de los datos filtrados y ejecutar una acción al presionar la tecla Enter:

  @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;
    }
  }