如何使用angular2中的primeng突出显示正在搜索的列表

Question

我有一个数据列表。当我键入时，它会根据该过滤器给出项目列表。所以现在我需要根据搜索突出显示不同颜色的列表。请帮忙。

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

这是我使用的过滤器代码，那里不起作用

Answer 1

看起来，您需要突出显示已过滤的数据。我们可以使用角度定制管道来实现这一点

你可以参考here，可能是一个重复的线程。

{{ fList.facilityName | highlight : 'search' }}