ng2 smart table 复选框不会在所有页面上持久存在

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

我自己没有使用 multi-select 和 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 });
}

如果这不起作用，您可以尝试添加事件侦听器，在检查时收集检查的行并在刷新（或初始化）时重新select它们。将事件回调添加到 table...

<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);
}

如果 none 有帮助，请在 github 上开一个新问题，希望开发人员知道解决此问题的简单方法。 :-) 如果那也失败了，请按照我的操作切换到 angular/material2。他们的文档很烂，但总的来说我认为它比那里的大多数组件都要好。

Answer 2

如果您想在应用程序的生命周期内维护数据，您必须将此数据保存在 "persistent way" 中并使用保存在 ngOnInit 中的数据。在一个组件中，我使用 ngOnDestroy 和一个 dataService

@Component({
})

export class MyComponent implements OnInit,OnDestroy {}
  variable1:number
  variable2:number
  contructor(private state:MyComponentData)
  ngOnInit() {
       let data=this.state.Data?data:null;
       this.variable1=(data)?data.variable1;
       this.variable2=(data)?data.variable2;
  }
  ngOnDestroy()
  {
       this.state.Data={
            variable1:this.variable1,
            variable2:this.variable2
       }
  }

服务就是这么简单

@Injectable()
export class MyComponentData{
   Data:any;
}

Answer 3

import { LocalDataSource } from 'ng2-smart-table';

settings = {
  ...
}
data = [
  ...
]

source: LocalDataSource;

constructor() {
  this.source = new LocalDataSource(this.data);
  this.source.setPaging(1,10,false);
}

ng2 smart table 复选框不会在所有页面上持久存在

ng2 smart table check boxes not persistent across all pages

javascript

angular

checkboxlist

ng2-smart-table