文章/答案/技术大牛

发布

社区首页 >问答首页 >当一个按钮的父组件频繁地重新呈现时，我的用户如何点击它？

问当一个按钮的父组件频繁地重新呈现时，我的用户如何点击它？
EN

Stack Overflow用户

提问于 2022-01-14 12:02:39

回答 2查看 37关注 0票数 -1

我有以下设置(下面是简化的伪代码)：

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

现在，在更新upload时，progress将频繁更改。这将导致包括按钮在内的整个行的重新呈现，这使得很难实际触发按钮单击事件。如果我点击多次，我最终会成功，但我不认为这会使一个好的ux.

我想我一定是错过了一些简单的东西，因为我相信我不是唯一一个拥有类似用例的人，但我无法找到任何解决方案--除了将按钮从表中移出，并且只有一个单独的循环通过上传ids数组来构建按钮。

如果有人能把我送上正确的轨道，我会非常感激的！

angular

javascript

回答 2

Stack Overflow用户

发布于 2022-01-14 12:35:01

最后，添加trackBy-function --或者在我的例子中添加trackByRow --是因为我正在使用primeng表。我不完全理解为什么，因为我认为trackBy是为了确保没有其他行被更新，因为我的问题是实际受影响的行被重新呈现。

但是，当trackBy-function就位后，当我检查dom时，我发现只有传递给我的app-progress-bar组件的进度参数才会发生变化，而没有其他任何变化。我的“取消”按钮起作用:)

票数 0

Stack Overflow用户

发布于 2022-01-14 12:48:51

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

如果upload.id与索引相同，则可以使用索引获取id。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70710288

复制

相似问题

问当一个按钮的父组件频繁地重新呈现时，我的用户如何点击它？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当一个按钮的父组件频繁地重新呈现时，我的用户如何点击它？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当一个按钮的父组件频繁地重新呈现时，我的用户如何点击它？
EN