Comment afficher les filtres enregistrés dans les en-têtes avec PrimeNG?

Je l'ai fait il y a presque un an; cela impliquait un code délicat, comme vous le verrez ci-dessous, car l'élément de table était sous une directive * ngIf . Je ne sais pas si votre cas est le même, mais si c'est le cas, voici ce que j'ai dû faire pour que cela fonctionne. Dans l'exemple, j'ai un fooTable qui a un filtre personnalisé sur la colonne status .

foo.component.ts : p>

<ng-container *ngIf="showFooTable">
    <div id="filters">
        <p-checkbox [(ngModel)]="statusFilter" value="up"      (onChange)="fooTable.filter(statusFilter, 'status', 'in')"></p-checkbox> Up
        <p-checkbox [(ngModel)]="statusFilter" value="down"    (onChange)="fooTable.filter(statusFilter, 'status', 'in')"></p-checkbox> Down
        <p-checkbox [(ngModel)]="statusFilter" value="unknown" (onChange)="fooTable.filter(statusFilter, 'status', 'in')"></p-checkbox> Unknown
    </div>

    <p-table #fooTable
             stateStorage="session"
             stateKey="foo-table-state">
    </p-table>
</ng-container>

foo.component.html :

import { ChangeDetectorRef, Component, ViewChild } from "@angular/core";

@Component({
    selector    : 'foo',
    templateUrl : 'foo.component.html'
})
export class FooComponent {
    // members /////////////////////////////////////////////////////////////////////////////////////////////////////////
    showFooTable: boolean  = true;
    statusFilter: string[] = [];

    // constructor(s) //////////////////////////////////////////////////////////////////////////////////////////////////
    constructor(private cd: ChangeDetectorRef) { }

    // getters and setters /////////////////////////////////////////////////////////////////////////////////////////////
    /**
     * Due to the Angular lifecycle, we have to do some tricky things here to pull the filters from the session,
     * if they are present. The workarounds done in this function are as follows:
     *
     * 1) Wait until the element is accessible. This is not until the *ngIf is rendered, which is the second call to
     *    this function. The first call is simply 'undefined', which is why we check for that and ignore it.
     * 2) Check and see if the filters for this object are even part of the template. If not, just skip this step.
     * 3) If we find the filters in the session, then change this object's filters model to equal it and call the change
     *    detection manually to prevent Angular from throwing an ExpressionChangedAfterItHasBeenCheckedError error
     * @param fooTable the reference to the foo table template
     */
    @ViewChild('fooTable') set fooTable(fooTable: any) {
        if(fooTable != undefined) {
            let filters = fooTable.filters['status'];
            if (filters != undefined && filters.value != undefined) {
                this.statusFilter = filters.value;
            }
            this.cd.detectChanges();
        }
    }
}

Les filtres de tables Turbo peuvent être accédés comme ça. table.filters ['maColonne'] ?. valeur . Vous aurez besoin de définir les valeurs d'entrée dans l'en-tête, [value ="table.filters[col.field ?.value"

...
<tr>
    <th *ngFor="let col of columns" [ngSwitch]="col.field" class="ui-fluid">
        <input pInputText 
               type="text"
               (input)="table.filter($event.target.value, col.field, col.filterMatchMode)"
               [value]="table.filters[col.field]?.value">
    </th>
</tr>
...

https://www.primefaces.org/primeng/#/table/state p>

Je viens juste de comprendre. Ce que j'ai fini par faire, c'est d'attacher l'étiquette par défaut à un modèle comme ceci:

<p-multiSelect [defaultLabel]="table.filters[col.field]?.value || 'All'">

Si la table a la valeur de filtre dans son état, elle remplira l'étiquette par défaut à «Tous».