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：＆＃39; multi＆＃39;选项显示带复选框的列。复选框确实显示，但每次我使用分页链接转到另一个页面时，清除选择。我试图解决这个问题因为我的项目有问题，这与此类似。

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

Answer 1

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

doEmit：boolean - 发出事件（刷新表）或不，默认= true

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

从您的数据创建一个DataSource，然后修改分页器设置：

source: LocalDataSource;

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

如果这不起作用，您可以尝试添加在检查时收集已检查行的事件侦听器，并在刷新（或init）时重新选择它们。向表中添加事件回调...

<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。他们的文档很糟糕，但总的来说，我认为它比大多数组件都要好。

Answer 2

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

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

source: LocalDataSource;

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

Answer 3

如果要在应用程序的实时数据库中维护数据，则必须以“持久的方式”保存这些数据。并使用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;
}

ng2智能表复选框在所有页面上都不是持久的

3 个答案: