使用服务器端分页时，如何在 Angular Material 2 mat-table 上实现跨页行选择？

我有一个带有服务器端分页的 Angular Material 表。但是，默认实现(如 Material 文档中所述)在导航到新页面时取消选中所有行(和“选择所有行”复选框)。

我尝试过各种各样的事情/方法(太多了，无法在此处记录)，但这里有一些片段可能会有帮助。为清楚起见，已简化代码。

selections.selected 数组确实包含跨页面的所有选定行。通过将默认的 isSelected 函数更改为自定义函数——跨页面的行显示为选中状态。请注意，在我的例子中，行有一个唯一的属性 _id。

private isSelectedCustom(row: any): boolean {
    return <boolean>this.selection.selected.find(o => o._id === row._id);
}

selection.isSelected = isSelectedCustom.bind(this);

但是，如果我取消选中一行(导航到新页面并返回)，该行再次显示为已选中。目前还不清楚为什么，我什至在取消选中行和在页面之间导航时看到 selection.selected 中的重复行。

尝试从选择中手动删除行(和重复行)不起作用，即

selection.onChange.subscribe(selection => {

    if (selection && selection.removed && selection.removed[0] && selection.removed.length == 1) {

        let removeId = selection.removed[0]._id;

        // Remove multiple occurences. Unknown how selection.selected can have duplicates.
        for (var i = this.selection.selected.length - 1; i >= 0; i--) {

            if (this.selection.selected[i]['_id'] == removeId) {
                console.log('force remove', this.selection.selected[i]);
                //this.selection.selected.splice(i, 1);
                this.selection.selected.
            }
        }
    }
}

对于“选择所有行”复选框，如果所有行都被选中则不可能派生(因为客户端只有一页行而不是所有行)。因此，当“选择所有行”被选中/未选中时，我使用一个明确设置为 true/false 的标志。

当导航到后续页面时，如果“选择所有行”标志为真，那么我将所有行设置为选中。

dataSource.data.forEach(row => selection.select(row));

如果某行未选中，我将“选择所有行”标志设置为 false。

if (selection && selection.removed && selection.removed.length > 0) {
    isAllPagesSelected = false;
}

这种“选择所有行”复选框的方法似乎通常有效，但感觉很乱。

最佳答案

如果没有跨页就容易多了，但是

onPageChanged -> 加载新数据 -> 删除所有检查 -> 从 viewChild -> foreach 查找行 -> 为每一行设置检查/取消检查(包括 theader 中的 checkAllbox)。

可能需要 viewChild forEach row => 找到最近的复选框并设置 Checked

关于angular-material2 - Angular Material2 Mat-Table服务器端分页跨页行选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54846239/