Question

我在Angular 2应用程序中使用PrimeNG数据表，我必须坚持选择路由更改。目前，我正在设置应用程序状态：

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')方法在构造函数中的ngOnInit期间获取selectedApplicants数组，甚至将其设置为：

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

在组件中。

然而，虽然它确实返回了一系列选定的申请人，但它并没有在表格中选择它们。

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

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

Answer 1

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

之前我做的是将selectedApplicants数组中的对象推送到表selection和value数组中。虽然它确实有效，但在我清除表的数组并将保存的对象从app状态推入它们之前，不得不做两个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选择

1 个答案: