使用服务器端分页时复选框选择不起作用

Question

我在带有server-side paging 的Angular 5+ 应用程序中使用Swilane 中的ngx-datatable。

我还在使用checkbox selection，它在客户端分页数据表中运行良好。

但是，对于服务器端分页，我遇到了一个问题：当我更改页面时，我失去了对上一页的选择。

我该如何解决？

Answer 1

我找到了 tylersampson 在 github 上发布的这个问题的解决方案：

我认为问题是因为每个页面都加载了新对象 改变。因此，当所选项目与页面进行比较时，存在 技术上不匹配。

对我来说，我设法通过使用 rowIdentity 解决了这个问题，这样它就可以 比较我的数据的“id”字段而不是对象。 https://swimlane.gitbooks.io/ngx-datatable/api/table/inputs.html#rowidentity

模板：

<ngx-datatable
    ...
    [rowIdentity]="getId">

组件：

getId(row) {    
    return row.id;
}

---

不过，我已经稍微改进了这个解决方案。

在我的例子中，实体的唯一标识符并不总是“id”，而是存储在组件类的字段变量中：

id = 'myId'; // this can be overridden

所以getId() 方法看起来像：

getId(row: T) {
    return row[this.id];
}

但是在模板中使用它来执行[rowIdentity]="getId" 将不工作，因为this 将失去其上下文，this.id 将只是undefined。

为了解决这个问题，我需要返回一个带有原始上下文的函数：

getId(row: T) {
    return row[this.id];
}

getIdFunction() {
    return this.getId.bind(this);
}

所以现在我可以在模板中使用：

[rowIdentity]="getIdFunction()"

这次注意最后的()，因为现在我们实际上调用了函数getIdFunction()，它将返回绑定其上下文的函数getId。