javascript - ng2 智能表格复选框不会在所有页面上持久存在

Question

我是 ng2-smart-tables 的新手。我正在尝试从 GitHub 页面修改下面的示例，以便在从一个页面移动到另一个页面时复选框不会消失。

import { Component } from '@angular/core';

@Component({
  selector: 'basic-example-multi-select',
  template: `
    <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
  `,
})
export class BasicExampleMultiSelectComponent {

  settings = {
    selectMode: 'multi',
    columns: {
      id: {
        title: 'ID',
      },
      name: {
        title: 'Full Name',
      },
      username: {
        title: 'User Name',
      },
      email: {
        title: 'Email',
      },
    },
  };

  data = [
    {
      id: 1,
      name: 'Leanne Graham',
      username: 'Bret',
      email: 'Sincere@april.biz',
    },
    {
      id: 2,
      name: 'Ervin Howell',
      username: 'Antonette',
      email: 'Shanna@melissa.tv',
    },
    {
      id: 3,
      name: 'Clementine Bauch',
      username: 'Samantha',
      email: 'Nathan@yesenia.net',
    },
    {
      id: 4,
      name: 'Patricia Lebsack',
      username: 'Karianne',
      email: 'Julianne.OConner@kory.org',
    },
    {
      id: 5,
      name: 'Chelsey Dietrich',
      username: 'Kamren',
      email: 'Lucio_Hettinger@annie.ca',
    },
    {
      id: 6,
      name: 'Mrs. Dennis Schulist',
      username: 'Leopoldo_Corkery',
      email: 'Karley_Dach@jasper.info',
    },
    {
      id: 7,
      name: 'Kurtis Weissnat',
      username: 'Elwyn.Skiles',
      email: 'Telly.Hoeger@billy.biz',
    },
    {
      id: 8,
      name: 'Nicholas Runolfsdottir V',
      username: 'Maxime_Nienow',
      email: 'Sherwood@rosamond.me',
    },
    {
      id: 9,
      name: 'Glenna Reichert',
      username: 'Delphine',
      email: 'Chaim_McDermott@dana.io',
    },
    {
      id: 10,
      name: 'Clementina DuBuque',
      username: 'Moriah.Stanton',
      email: 'Rey.Padberg@karina.biz',
    },
    {
      id: 11,
      name: 'Nicholas DuBuque',
      username: 'Nicholas.Stanton',
      email: 'Rey.Padberg@rosamond.biz',
    },
  ];
}

这使用 selectMode : 'multi' 选项来显示带有复选框的列。复选框确实显示，但每次我使用分页链接转到另一页时，选择都会被清除。我正在尝试解决这个问题，因为我的项目有一个与此类似的问题。

我试图找到有关如何跨页面保留选择的文档，但没有成功，因为可用的文档数量有限。这似乎是一个很常见的功能，应该有更多关于它的信息，但似乎并非如此。对此问题的任何帮助将不胜感激。

Answer 1

我自己没有使用 ng2-smart-tables 的多选，但是 documentation提及

doEmit: boolean - emit event (to refresh the table) or not, default = true

我不确定这是否可行，但您可以尝试将其设置为 false。

根据您的数据创建数据源，然后修改分页器设置:

source: LocalDataSource;

constructor() {
    this.source = new LocalDataSource(this.data);
    this.source.setPaging({ doEmit: false });
}

如果这不起作用，您可以尝试添加事件监听器，在检查时收集检查的行并在刷新(或初始化)时重新选择它们。向表中添加事件回调...

<ng2-smart-table [settings]="settings" [source]="source" (rowSelect)="onRowSelect($event)" (userRowSelect)="onUserRowSelect($event)"></ng2-smart-table>

...记录事件并查看您是否从那里获得任何有用的信息。

onRowSelect(event) {
    console.log(event);
}

onUserRowSelect(event) {
    console.log(event);
}

如果这些都没有帮助，请在 github 上打开一个新问题，希望开发人员知道一个简单的方法来解决这个问题。 :-)如果那也失败了，请执行我所做的并切换到 angular/material2。他们的文档很糟糕，但总的来说，我认为它比那里的大多数组件都要好。