PrimeNG La valeur du filtre Datatable change en undefined après recherche avec lazy-load

Question

J'ai une table de données que je voudrais charger paresseux et utiliser les filtres intégrés pour générer les filtres pour la demande d'API de données. Chaque fois que je tape quelque chose dans le champ de filtre, il renvoie la recherche puis change tout ce que j'ai tapé en "indéfini". Il renvoie toujours le tableau de données correct afin que la recherche fonctionne mais la valeur ne reste pas là après. Voici le code:

modèle de table de données

<p-dataTable [rows]="10" [lazy]="true" [paginator]="true" [pageLinks]="5" [rowsPerPageOptions]="[5,10,20]" [value]="businesses" 
    responsive="true" sortable="true" rowExpandMode="single" (onRowCollapse)="deselectContact()" 
    [totalRecords]="totalRecords" (onLazyLoad)="loadLazy($event)" expandableRows="true" (onRowExpand)="getDocsContacts($event)"> 

    <p-column expander="true" [style]="{'width':'30px'}"></p-column> 
    <p-column sortable="true" filterMatchMode="equals" [filter]="true" filterPlaceholder="Search" field="tag" header="ID"></p-column> 
    <p-column sortable="true" filterMatchMode="equals" [filter]="true" filterPlaceholder="Search" field="name" header="Name"></p-column> 
    <p-column sortable="true" filterMatchMode="equals" [filter]="true" filterPlaceholder="Search" field="address1" header="Street"></p-column> 
    <p-column sortable="true" filterMatchMode="equals" [filter]="true" filterPlaceholder="Search" field="city" header="City"></p-column> 
    <p-column sortable="true" filterMatchMode="equals" [filter]="true" filterPlaceholder="Search" field="state" header="State"></p-column> 
    <p-column sortable="true" filterMatchMode="equals" [filter]="true" filterPlaceholder="Search" field="zip" header="Zip"></p-column> 
    <p-column header="Edit" > 
    <ng-template pTemplate="body"> 
     <button>EDIT</button> 
    </ng-template> 
    </p-column> 

    <ng-template let-business pTemplate="rowexpansion"> 
    <div class="notes"> 
     <label>Note </label> 
     <br/> 
     <textarea class="notefield" readonly>{{business.note}}</textarea> 

    </div> 
    <div class="documents"> 
     <div class="docs" *ngFor="let currentDoc of currentDocs; let ind = index"> 
     {{currentDoc.name}}<button>VIEW</button><button>DOWNLOAD</button> 
     </div> 
    </div> 
    <div class="contacts"> 
     <select (change)="selectContact($event.target.value)"> 
     <option disabled >Select Contact</option> 
    <option *ngFor="let currentContact of currentContacts; let i = index" [value]="i"> 
     {{currentContact.department}} 
    </option> 
    </select> 
     <div *ngFor="let currentC of currentContacts; let ndx = index"> 
     <div *ngIf="selectedContact == ndx"> 
      {{currentC.name}} <br/> {{currentC.phone}} <br/> {{currentC.email}} <br/> {{currentC.website}} <br/> {{currentC.note}} 
     </div> 
     </div> 

    </div> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <div class="hours"> 
    {{hoursDisplay}} 
    </div> 

    </ng-template> 
</p-dataTable> 

fonction de la charge Lazy

loadLazy(event: LazyLoadEvent) { 
    console.log(event); 
    var sortAscDesc: string; 
    var orderWithDirection; 
    if(event.sortOrder === -1){ 
     sortAscDesc = "DESC"; 
    } 
     else if(event.sortOrder === 1){ 
     sortAscDesc = "ASC"; 
     } 

     if(event.sortField !== undefined){ 
     orderWithDirection = event.sortField + " " + sortAscDesc; 
     }else { 
     orderWithDirection = "tag" + " " + sortAscDesc; 
     } 



    var filter = { skip: event.first, 
        limit: event.rows, 
        where: event.filters, 
        order: orderWithDirection, 

        }; 

        console.log(filter) 
    this.bizapi.find(filter).subscribe((res: Business[]) => { 
     this.totalRecords = res.length; 
     this.businesses = res; 
    }); 

} 

Primeng Datable fonction de filtre

DataTable.prototype.filter = function (value, field, matchMode) { 
     if (!this.isFilterBlank(value)){ 
      var val = "%"+value+"%"; 
      this.filters[field] = value; 
      // this.filters[field] = { like: val, "options":"i" }; 
     }else if (this.filters[field]) 
      delete this.filters[field]; 
     this._filter(); 
    }; 

Je l'ai fait modifier le code de la table des données légèrement mais était seulement pour le formater afin qu'il fonctionne avec mon api. Le code d'origine ressemblait à ceci:

DataTable.prototype.filter = function (value, field, matchMode) { 
     if (!this.isFilterBlank(value)) 
      this.filters[field] = { value: value, matchMode: matchMode }; 
     else if (this.filters[field]) 
      delete this.filters[field]; 
     this._filter(); 
    }; 

Answer 1

Ce que je fini par faire pour résoudre c'était en train de la fonction de table de données à sa forme d'origine, puis les filtres a fonctionné comme prévu. Cela n'a pas résolu le problème du côté de l'API, donc j'ai juste dû faire un peu d'analyse et de création d'objet pour obtenir la mise en forme correcte.