<mat-table> 分页在删除行时与粘性发生冲突

Question

我有一个问题，在网上找不到任何对我有帮助的东西，因此希望有人能在这里帮助我。

我正在构建一个动态填充的 table。用户可以在动态填充后删除 table 的单行。有一个粘性列（第一个）和分页。这两个功能给我带来了很多问题，其中一个我无法解决。

以下场景（见 gif）：我在 table 中有 10 行，由于分页器，我只显示例如 5。如果我现在删除显示的 5 行之一，第六行“滑入”并填充已删除行的 space。问题就在这里。对于这个“新”行，粘性元素根本不起作用。但只有这条线，其他 4 条线工作得很好。奇怪的是，只要我单击编辑按钮或将鼠标悬停在分页器上，该行就会以某种方式“更新”并且粘性列再次起作用。

如果有任何问题，请随时回复 - 我很高兴能得到任何帮助

Stackblitz：https://stackblitz.com/edit/angular-editable-table-part-1-sticky-column-atdm3y?file=src/app/app.component.ts（您必须单击一次删除按钮，才能“启动真正的错误”，这与我有关。.初始化的某些内容在此 stackblitz 示例中不起作用，但这是在这种情况下不重要）

Answer 1

你需要使用 trackBy，幸运的是 MatTable 提供了作为输入 https://material.angular.io/components/table/api#MatTable

NgForOf 需要唯一标识可迭代项中的项，以便在重新排序可迭代项、添加新项或删除现有项时正确执行 DOM 更新。

参考：https://angular.io/api/core/TrackByFunction#description

基本上很简单的修复：

HTML 模板：

<table mat-table [dataSource]="dataSource" [trackBy]="trackByIdentity">

其中 trackByIdentity 可以像这样简单：

trackByIdentity(index, item) {
   return item.id;
}

<mat-table> 分页在删除行时与粘性发生冲突

<mat-table> pagination runs into conflict with sticky when deleting row

angular-material

angular