I'm using a PrimeNG data table in an Angular 2 application and I have to persist the selection on route change. Currently, I'm setting the app state like so:
onTableRowStateChange() {
this.appState.set('selectedApplicants', this.selectedApplicants);
}
<p-dataTable tableStyleClass="table" [value]="applicants"
[(selection)]="selectedApplicants"
(onRowSelect)="onTableRowStateChange()"
(onRowUnselect)="onTableRowStateChange();">
<header>Applications</header>
<p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>
this.appState.get('selectedApplicants')
selectedApplicants
selectedApplicants:any[] = ( this.appState.get('selectedApplicants').length > 0 ) ? this.appState.get('selectedApplicants') : this.appState.set('selectedApplicants', []);
this.selectedApplicants.splice(event.index, 1);
Found my problem. I was initializing the array, which was used in the DataTable [value]
attribute, during ngOnInit
. Hence, the selection
, value
and, in this case, applicants
arrays all basically carried different objects (while carrying the same data) on every view initialization.
What I did before that was push the objects from the selectedApplicants
array into the table selection
and value
arrays. While it did work, it was not a good option with having to do two forEach
loops before I could clear the table's arrays and push the saved objects from the app state into them. That was not awful for two-three objects but if I had to deal with more it would have slowed down the app immensely.
So, the solution was to use this:
applicants:any[] = ( this.appState.get('applicants').length > 0 ) ? this.appState.get('applicants') : this.appState.set('applicants', this.getApplicants());
And then check if there are applicants present and set appState
on init if they are not.
if (this.appState.get('applicants').length < 1) {
this.appState.set('applicants', this.getApplicants())
}
This preserves the same arrays from before the route change by getting them from the appState
and re-initializes them only when it needs to.