PrimeNg TurboTable - 条件行分组答案

【问题标题】：PrimeNg TurboTable - Conditional Row-groupingPrimeNg TurboTable - 条件行分组
【发布时间】：2019-09-06 11:38:19
【问题描述】：

我正在使用 PrimeNG 的 TurboTable (p-table)

我有一个groupField 参数，它可以是null 或具有对应于列标题的值。此参数的值可以随时动态更改。预期的行为是，当 groupField==null 呈现普通表时，但当 'groupField==` 时，行按此值分组，如 here 所示。

我想按照here 的描述实现行分组，其中表响应groupField 参数中的更改。

我尝试过的：

用pTemplate="body" 制作两个ng-templates，类似这样。

<ng-template pTemplate="body" *ngIf="groupField==null">
    ...
<ng-template>
<ng-template pTemplate="body" *ngIf="groupField!=null">
    ...
<ng-template>
<ng-template pTemplate="rowexpansion" *ngIf="groupField!=null">
    ...
<ng-template>

这不起作用，因为我怀疑 p-table 在第一次渲染时形成其配置，随后只更新数据。

制作两个不同的<p-table>s，一个带行分组，另一个不带，ngIf 控制在给定时间显示哪一个。这有效，但对我来说没有意义，因为我应该能够在一张桌子上做到这一点，就像我在旧的 <p-datatable> 中一样。

我想要的是让一张桌子处理所有这些。

【问题讨论】：

标签： angular primeng primeng-datatable primeng-turbotable

【解决方案1】：

您可以在<p-template> 中添加<ng-container>，使其看起来像这样：

<ng-template pTemplate="body">
   <ng-container *ngIf="groupField==null">
    ...
   </ng-container>
   <ng-container *ngIf="groupField!=null">
    ...
   </ng-container>
<ng-template>
<ng-template pTemplate="rowexpansion" *ngIf="groupField!=null">
    ...
<ng-template>

你可以在这里检查它的工作情况：

https://stackblitz.com/edit/angular-primeng-stack-55706959?file=src/app/ils-tree/ils-tree.component.ts

有一个groupField，您可以在tablegrouping.component.ts 中将其从true 更改为false，以检查其工作原理。

【讨论】：