Question

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

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

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

我该如何解决？

Answer 1

我发现 tylersampson 在github上发布了此问题的解决方案：

我认为这个问题是因为每个页面都加载了新对象   更改。因此，当所选项目与页面进行比较时，就会有   技术上没有匹配。

对我来说，我设法通过使用rowIdentity来解决这个问题   比较＆＃34; id＆＃34;我的数据字段而不是对象。   https://swimlane.gitbooks.io/ngx-datatable/api/table/inputs.html#rowidentity

模板：

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

成分：

getId(row) {    
    return row.id;
}

但是，我已经对此解决方案进行了一些改进。

在我的情况下，实体的唯一标识符并不总是＆＃34; id＆＃34;，但它存储在Component的类的字段变量中：

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。

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

1 个答案: