PrimeNG DataTable filtre multisélect avec des valeurs dynamiques

Question

J'utilise PrimeNG 4.x.x prenant en charge Angular 4. Je souhaite fournir des valeurs dynamiquement à un filtre multisélect dans la colonne DataTable.

Comme illustré ci-dessous, je crée dynamiquement des colonnes de table à partir de 'clientcolumnDefs' et maintenant je veux fournir dynamiquement des valeurs à l'option de filtre multisélect.

<p-dataTable #clientTable [value]="clientrowData" selectionMode="single" [(selection)]="selectedClient" dataKey="id" [contextMenu]="cm"> 
 
\t \t \t <p-column *ngFor="let col of clientcolumnDefs" [field]="col.field" [header]="col.header" sortable="true" [filter]="true" filterMatchMode="in" [style]="{'overflow':'visible'}"> 
 
\t \t \t \t <ng-template pTemplate="filter" let-col> 
 
\t \t \t \t \t <p-multiSelect [options]="dynamicaFilters" defaultLabel="All" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect> 
 
\t \t \t \t </ng-template> 
 
\t \t \t </p-column> 
 
</p-dataTable>

Comment puis-je remplir mes dynamicFilters dactylographiée, de sorte que cela fonctionne pour toutes les colonnes.

Les filtres doivent être de ce type mais les valeurs seront dynamiques pour chaque colonne.

filter image

Answer 1

dynamicaFilters devrait être un tableau à plusieurs dimensions. Dans votre fichier ts, vous devez extraire les valeurs distinctes par colonne et les insérer dans un tableau temporaire, puis insérer ce tableau temporaire dans dynamicaFilters.

Votre code html sera également changer pour être -

<p-column *ngFor="let col of clientcolumnDefs; let i= index" [field]="col.field" [header]="col.header" sortable="true" [filter]="true" filterMatchMode="in" [style]="{'overflow':'visible'}"> 
      <ng-template pTemplate="filter" let-col> 
       <p-multiSelect [options]="dynamicaFilters[i]" defaultLabel="All" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect> 
      </ng-template> 
     </p-column> 

Je ne l'ai pas eu la chance d'essayer moi-même, laissez-moi savoir si vous avez des questions.