Question

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

我有一个工作正常的Angular 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的标志。

导航到后续页面时，如果“选择所有行”标志为true，则将所有行都设置为选中状态。

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

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

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

这种“选择所有行”复选框方法通常可以正常工作，但感觉很混乱。

Answer 1

如果没有交叉页面，它会容易得多，但是

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

也许需要viewChild forEach row =>找到最近的复选框并setChecked

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

1 个答案: