angular - 如何使用angular2中的primeng突出显示正在从列表中搜索的那些
问题描述
我有一个数据列表。当我键入时,它会为我提供基于该过滤器的项目列表。所以现在我需要根据搜索用不同的颜色突出显示列表。请帮忙。
HTML:
<input autocomplete='off' type="text" pInputText size="30" placeholder="Search" (change)="searchFacility(searchFname)" (keyup)="searchFacility(searchFname)"
[(ngModel)]="searchFname" class="pull-right textind10">
<div class="content-section implementation col-lg-12 col-md-12 col-sm-12 col-xs-12 nopadding text-center">
<p-dataTable [value]="payerOfficesList | searchPayerOffices : sLetter" expandableRows="true" #dtFacilities [paginator]="true"
sortMode="multiple" [rows]="10" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" [globalFilter]="gb" [tableStyleClass]="'table table-bordered mrgtop15'">
<p-column styleClass="col-icon" [style]="{'width':'40px'}">
<ng-template let-col let-fList="rowData" pTemplate="body">
<a *ngIf="fList.memberFacilities.length > 0" (click)="dtFacilities.toggleRow(fList)">
<i *ngIf="!dtFacilities.isRowExpanded(fList)" class="fa fa-chevron-circle-right" [style]="{'margin-top':'5px'}"></i>
<i *ngIf="dtFacilities.isRowExpanded(fList)" class="fa fa-chevron-circle-down"></i>
</a>
</ng-template>
</p-column>
<p-column field="facilityName" header="Payer Office Name" [sortable]="true">
<ng-template let-col let-fList="rowData" pTemplate="body">
<span pTooltip="{{fList.facilityName}} ({{fList.facilityType}})" tooltipPosition="top">
<a (click)="selectedFacility(fList.facilityID)">
<strong>{{fList.facilityName}}</strong>
</a>
(
<span>{{fList.facilityType}}</span>)
</span>
</ng-template>
</p-column>
</p-dataTable>
</div>
TS:
searchFacility(search) {
this.sLetter = search;
if (search) {
this.dtFacilities.expandedRows = [];
setTimeout(() => {
this.dtFacilities.expandedRows = this.dtFacilities.value;
}, 100);
// this.dtFacilities.expandedRows = this.dtFacilities.value;
}
else {
this.dtFacilities.expandedRows = [];
}
}
过滤器代码:
transform(value: PayerOfficesList[], filterBy: any): PayerOfficesList[] {
if (filterBy && value) {
let pattern = filterBy.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
pattern = pattern.split(' ').filter((t) => {
return t.length > 0;
}).join('|');
const regex = new RegExp(pattern, 'gi');
return filterBy.replace(regex, (match) => `<span class="search-highlight">${match}</span>`);
}
这是我使用的过滤器代码,但在那里不起作用
解决方案
看起来,您需要突出显示过滤后的数据。我们可以在角度使用自定义管道来实现
你可以参考这里,可能是重复的线程。
{{ fList.facilityName | highlight : 'search' }}
推荐阅读
- 3d - 如何在 Godot 中制作 PLY 解析器:三角扇
- android - GoogleMap.addMarker(com.google.android.gms.maps.model.MarkerOptions)' 在空对象引用上
- php - 在 php 标头中使用查询
- python - 创建可在远程网络上访问的 TCP 服务器
- javascript - 如何使用具有一个功能的 Javascript 创建多选项卡?
- django - 方法不允许(GET):和一键错误
- mongodb - $Lookup 在具有更多属性的数组中 MongoDB
- python - 我的代码混淆了正则表达式的输入文件名
- excel - 当我尝试在两个不同的工作簿之间工作时出现错误 438。具体来说,我想从一个打印行数
- android - Firestore RecyclerView app's crashing when run