在路由更改时保留 PrimeNG DataTable 选择

Question

我在 Angular 2 应用程序中使用 PrimeNG 数据 table，我必须在路由更改时坚持 selection。目前，我正在像这样设置应用程序状态：

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

其中 appState 是保存 selection 状态的服务。这也用于保留一些在 selection 上打开的选项卡。

虽然正确设置了 appState，return 是一个 selected 申请者数组并保留打开的选项卡，但它不会保留数据中的实际 selection table 因此可以再次 select 编辑条目。

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') 方法在 `ngOnInit 期间，在构造函数中获取 selectedApplicants 数组，甚至像这样设置它：

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

在组件中。

然而，虽然它确实 return 一系列 select 申请者，但它并没有 select 他们 table 本身。

作为旁注，在关闭选项卡时执行 this.selectedApplicants.splice(event.index, 1); deselects table 条目，因此可以通过更改以编程方式更改 selection selected 条目数组。即使存在所需的数组，它也不会 select 在路由更改后自动启动视图的条目。

是否有解决方法或任何方法可以在路由更改时保留数据 table selection？

Answer 1

找到我的问题。在 ngOnInit 期间，我正在初始化 DataTable [value] 属性中使用的数组。因此，selection、value 以及本例中的 applicants 数组在每次视图初始化时基本上都携带不同的对象（同时携带相同的数据）。

我之前所做的是将 selectedApplicants 数组中的对象推送到 table selection 和 value 数组中。虽然它确实有效，但在我可以清除 table 的数组并将保存的对象从应用程序状态推送到它们之前必须执行两个 forEach 循环并不是一个好的选择。这对于两三个对象来说并不可怕，但如果我不得不处理更多对象，它会极大地减慢应用程序的速度。

所以，解决方案是使用这个：

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

然后检查是否有应聘者在场，如果没有，则在初始化时设置appState。

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

这通过从 appState 获取它们来保留路由更改之前的相同数组，并仅在需要时重新初始化它们。

在路由更改时保留 PrimeNG DataTable 选择

Persist PrimeNG DataTable selection on route change

angular

typescript

primeng