Tengo la siguiente configuración (el siguiente es un pseudocódigo simplificado):
<table> <tr *ngFor="let upload in uploads"> <td> <app-progress-bar [progress]="upload.progress"></app-progress-bar> </td> <td> <button (click)="cancelUpload(upload.id)>x</button> </td> </tr> </table> ahora, la upload cambiará con frecuencia mientras se actualiza el progress . Esto provoca una nueva representación de toda la fila, incluido el botón, lo que hace que sea muy difícil activar el evento de clic de los botones. Si hago clic varias veces, eventualmente lo lograré, pero no creo que esto sea un buen ux ...
Creo que me falta algo simple, porque creo que no soy la única persona con un caso de uso similar, pero no pude encontrar ninguna solución, excepto mover el botón fuera de la mesa y tener un bucle separado. solo a través de la matriz de ID de carga para crear los botones.
¡Apreciaría mucho si alguien pudiera enviarme por el camino correcto nuevamente!
Al final, agregar la trackBy o, en mi caso, trackByRow porque estoy trabajando con una tabla primeng, funcionó. No entiendo completamente por qué, porque aunque trackBy está ahí para garantizar que no se actualicen otras filas, mi problema fue que la fila realmente afectada se volvió a procesar.
Pero con la trackBy en su lugar, cuando inspecciono el dom veo que solo cambia el parámetro de progreso pasado a mi componente app-progress-bar , nada más. Y mi botón cancelar funciona :)
<table> <tr *ngFor="let upload of uploads; ; let id = index"> <td> <app-progress-bar [progress]="upload.progress"></app-progress-bar> </td> <td> <button (click)="cancelUpload(id)>x</button> </td> </tr> </table>Si su upload.id es el mismo que el índice, puede usar el índice para obtener la identificación.