How can my users click a button while it's parent component is re-rendering frequently?-CodePudding

I am having the following setup (the below is simplified pseudocode):

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

now, upload will change frequently while progress is being updated. This causes a re-render of the entire row including the button, which makes it very hard to actually trigger the buttons click event. If I click multiple times I'd eventually make it, but I don't think this would make for a good ux...

I think I am must be missing something simple, because I would believe I am not the only person with a similar use case, but I was not able to find any solution - except for moving the button out of the table and having a separate loop through only the array of upload-ids to build the buttons.

I'd highly appreciate if someone could send me on the right track again!

CodePudding user response：

In the end adding the trackBy-function - or in my case trackByRow because I am working with a primeng-table did the trick. I don't fully understand why, because I though trackBy is there to ensure that no other rows are being updated, by my problem was that the actually affected row re-rendered.

But with the trackBy-function in place, when I inspect the dom I see that only the progress-parameter passed to my app-progress-bar component changes, nothing else. And my cancel button works :)

CodePudding user response：

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

If your upload.id is the same as the index , you can use the index to get the id.