Persist PrimeNG DataTable выбор при изменении маршрута

Question

Я использую таблицу данных PrimeNG в приложении Angular 2, и мне нужно сохранить выбор при изменении маршрута. В настоящее время я устанавливаю состояние приложения следующим образом:

onTableRowStateChange() {
  this.appState.set('selectedApplicants', this.selectedApplicants);
}

Где appState - это служба, которая сохраняет состояние выбора. Это также используется для сохранения некоторых вкладок, которые открываются при выборе.

Хотя appState установлен правильно, возвращает массив выбранных кандидатов и сохраняет открытые вкладки, он не сохраняет фактический выбор в таблице данных, поэтому записи можно выбирать снова.

HTML выглядит так:

<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 массив во время `ngOnInit, в конструкторе и даже установить его так:

selectedApplicants:any[] = ( this.appState.get('selectedApplicants').length > 0 ) ? this.appState.get('selectedApplicants') : this.appState.set('selectedApplicants', []);

в компоненте.

Однако, хотя он возвращает массив выбранных кандидатов, он не выбирает их в самой таблице.

Как примечание, делая this.selectedApplicants.splice(event.index, 1); при закрытии вкладки отменяется выбор записи в таблице, поэтому можно программно изменять выбор, изменяя массив выбранных записей. Он просто не выбирает записи автоматически при запуске просмотра после изменения маршрута, даже если требуемый массив присутствует.

Есть ли обходной путь или какой-либо способ сохранить выбор таблицы данных при изменении маршрута?

Answer 1

Нашел мою проблему. Я инициализировал массив, который использовался в DataTable [value] атрибут, во время ngOnInit, Следовательно selection, value и в этом случае applicants все массивы в основном содержали разные объекты (с одинаковыми данными) при каждой инициализации представления.

То, что я делал до этого, было выталкивать объекты из selectedApplicants массив в таблицу selection а также value массивы. Хотя это сработало, это не было хорошим вариантом forEach циклы, прежде чем я смог очистить массивы таблицы и вставить в них сохраненные объекты из состояния приложения. Это не было ужасно для двух-трех объектов, но если бы мне пришлось иметь дело с большим количеством, это сильно замедлило бы приложение.

Итак, решение было использовать это:

applicants:any[] = ( this.appState.get('applicants').length > 0 ) ? this.appState.get('applicants') : this.appState.set('applicants', this.getApplicants());

А затем проверьте, присутствуют ли заявители, и установите appState на init, если они не.

if (this.appState.get('applicants').length < 1) {
  this.appState.set('applicants', this.getApplicants())
}

Это сохраняет те же массивы до изменения маршрута, получая их из appState и повторно инициализирует их только тогда, когда это необходимо.