Angular Material2 Mat-Table 服务器端分页跨页行选择答案

【问题标题】：Angular Material2 Mat-Table Server Side Pagination Cross Page Row SelectionAngular Material2 Mat-Table 服务器端分页跨页行选择
【发布时间】：2020-04-24 04:52:15
【问题描述】：

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

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

我已经尝试了各种各样的事情/方法（这里记录的太多了），但这里有一些可能会有所帮助的 sn-ps。为了清晰起见，代码已被简化。

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/fals的标志。

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

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

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

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

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

【问题讨论】：

标签： angular-material2

【解决方案1】：

如果没有跨页，它会容易得多，但是

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

也许需要 viewChild forEach row => 找到最近的复选框并设置检查

【讨论】：