Tengo una tabla en un archivo HTML utilizado en una aplicación Angular. Necesito recuperar los pedidos de los usuarios y enumerar los pedidos en la tabla. si el usuario hace clic en el botón Revisar, quiero que el usuario pueda ver los artículos de pedido relacionados para este pedido específico. El botón de revisión debe expandir una nueva fila que contenga los artículos de pedido relacionados. ¿Cómo lograr esto programáticamente? He intentado pasar la identificación del pedido como la identificación de la fila, pero desafortunadamente, esto no funciona.
<script type="text/javascript"> function show_hide_row(row) { $("#" + row).toggle(); } </script> <table class="table" cellpadding=10> <caption>The total amount of orders is {{orders.length}}</caption> <tbody *ngFor="let order of orders" > <td> <a class="link" style="font-weight: bold; cursor: pointer;" onclick="show_hide_row(order.orderId);">Review</a> </td> </tr> <tr id="{{order.orderId}}" class="hidden_row"> <p>Here comes the related order items for the expanded order</p> </tr> </tbody> </table>¡Cualquier ayuda sería muy apreciada! Gracias.
He resuelto este problema siguiendo estos pasos:
1- He creado un archivo JS en la carpeta assets/js 2- He agregado la función anterior al archivo JS. 3- He agregado el archivo al archivo angular.json
"scripts": ["src/assets/js/common.js"]4- ejecutar el comando
ng serve5- En el archivo ts del módulo componente he declarado una función que coincide con el nombre de la función en el archivo JS
declare function show_hide_row(row: any): any;6- Creé una función pública con el mismo nombre, esta se usará en el archivo HTML para llamar a la función JS
public show_hide_row(row: any): void { show_hide_row(row); }7- He probado la función añadiendo
function show_hide_row(row) { $("#" + row).toggle(); **console.log(row);** }8- en el archivo HTML estoy usando el enlace de eventos Angular:
(click)="this.show_hide_row(order.orderId)"9- Al probarlo con el navegador, funciona y puedo ver la identificación personalizada de la fila.