使用延迟加载搜索后，PrimeNG 数据表过滤器值更改为未定义

Question

我有一个数据 table，我想延迟加载并使用内置过滤器为数据 api 请求生成过滤器。每当我在过滤器字段中输入内容时，它 returns 搜索就会将我输入的任何内容更改为 "undefined"。它仍然是 returns 正确的数据数组，因此搜索有效，但之后该值不会保留在那里。这是代码：

数据table模板

<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>

延迟加载功能

  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过滤函数

 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();
    };

我确实稍微修改了数据 table 代码，但这只是为了格式化它以便它可以与我的 api 一起使用。原始代码如下所示：

 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

我最终解决这个问题的方法是将数据 table 函数恢复到原来的形式，然后过滤器按预期工作。这并没有解决 API 方面的问题，所以我只需要做一些额外的解析和对象创建来获得正确的格式。

使用延迟加载搜索后，PrimeNG 数据表过滤器值更改为未定义

PrimeNG Datatable filter value changes to undefined after search with lazy-load

angular

primeng

primeng-datatable