Ng2 smart table flags not saved on all pages

Question

I am new to ng2-smart-tables. I am trying to modify the example below on a GitHub page so that the checkboxes do not disappear when going from page to page.

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: '[e-mail]', }, { id: 2, name: 'Ervin Howell', username: 'Antonette', email: '[e-mail]', }, { id: 3, name: 'Clementine Bauch', username: 'Samantha', email: '[e-mail]', }, { id: 4, name: 'Patricia Lebsack', username: 'Karianne', email: '[e-mail]', }, { id: 5, name: 'Chelsey Dietrich', username: 'Kamren', email: '[e-mail]', }, { id: 6, name: 'Mrs. Dennis Schulist', username: 'Leopoldo_Corkery', email: '[e-mail]', }, { id: 7, name: 'Kurtis Weissnat', username: 'Elwyn.Skiles', email: '[e-mail]', }, { id: 8, name: 'Nicholas Runolfsdottir V', username: 'Maxime_Nienow', email: '[e-mail]', }, { id: 9, name: 'Glenna Reichert', username: 'Delphine', email: '[e-mail]', }, { id: 10, name: 'Clementina DuBuque', username: 'Moriah.Stanton', email: '[e-mail]', }, { id: 11, name: 'Nicholas DuBuque', username: 'Nicholas.Stanton', email: '[e-mail]', }, ]; } 

This uses selectMode: 'multi'option to display the checkbox column. These checkboxes show, but every time I use pagination links to go to another page, the selection is cleared. I am trying to solve this problem because I have a problem in my project that is similar to this.

I tried to find documentation on how to save the selection on different pages, but was not successful, since only a limited amount of documentation is available. It looks like a function that is common enough that there should be more information about it, but it doesn't seem to be that way. Any help on this would be greatly appreciated.

Answer 1

I have not used multi-select with ng2-smart-tables myself, but the documentation mentions

doEmit: boolean - fix the event (update the table) or not, default = true

I'm not sure if this will work, but you can try setting it to false .

Create a DataSource from your data, and then change the paginator settings:

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

If this does not work, try adding event-listeners that collect the checked lines during the check and re-select them during the update (or init). Add event callbacks to table ...

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

... log events and see if you have any useful information.

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

If none of this helps, open a new problem on github and hope that the developers will understand an easy way to fix it. :-) And if it is not, do what I did and switch to angular / material2. Their documentation sucks, but overall I think this is better than most components.

Answer 2

If you want to save the data in real time of the application, you must save this data "permanently" and use the data stored in ngOnInit. In the component, I use ngOnDestroy and 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 } } 

The service is as simple as

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