0
我有一個數據表，我想延遲加載並使用內置的過濾器來生成數據API請求的過濾器。每當我在過濾器字段中輸入內容時，它會返回搜索，然後將我輸入的內容更改爲「未定義」。它仍然返回正確的數據數組，以便搜索正在工作，但是值不會在那裏保留。下面是代碼：PrimeNG Datatable過濾器的值更改爲undefined搜索後延遲加載
數據表模板
<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確定年代過濾功能
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();
};
我做了小幅修改數據表的代碼，但該只是將其格式化，所以它可以與我的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();
};