PrimeNg TurboTable - условная группировка строк - PullRequest
Новая
       11

PrimeNg TurboTable - условная группировка строк

1 голос
/ 16 апреля 2019

Я использую TurboTable (p-таблица) PrimeNG

У меня есть параметр groupField, который может быть либо null, либо иметь значение, соответствующее заголовку столбца. Значение этого параметра может быть изменено динамически в любое время. Ожидаемое поведение таково: когда groupField==null отображается нормальная таблица, но когда 'groupField == `, строки группируются согласно этому значению, как видно здесь .

Я хочу реализовать группировку строк, как описано здесь , где таблица реагирует на изменения параметра groupField.

Что я пробовал:

  1. Создайте два ng-шаблона с pTemplate="body", что-то вроде этого. 
<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-таблица формирует свою конфигурацию при первом рендеринге, а затем только обновляет данные.

  1. Создайте два разных <p-table> s, один с группировкой строк, а другой без, с помощью ngIf для управления тем, который отображается в данный момент времени. Это работает , но не имеет смысла для меня, так как я должен быть в состоянии сделать это в одной таблице, как я мог в старшем <p-datatable>.

Мне бы хотелось, чтобы все это обрабатывал ОДИН стол.

1 Ответ

0 голосов
/ 16 апреля 2019

Вы можете добавить <ng-container> внутри вашего <p-template>, чтобы оно выглядело примерно так: 

<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, который вы можете изменить с true на false в tablegrouping.component.ts, чтобы проверить, как он работает.

...