Как выделить из списка те, которые ищут, используя primeng in angular2 - PullRequest
Новая
       1

Как выделить из списка те, которые ищут, используя primeng in angular2

0 голосов
/ 10 апреля 2019

У меня есть список данных.Когда я нажимаю, он дает мне список элементов на основе этого фильтра.Поэтому теперь мне нужно выделить список другим цветом, основываясь на поиске.Пожалуйста, помогите.

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 = [];
}
}

Need like this

Код фильтра: 

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

Это код фильтра, который я использовал, и там не работает

1 Ответ

0 голосов
/ 10 апреля 2019

Похоже, вам нужно выделить ваши отфильтрованные данные. Мы можем добиться этого, используя нестандартные трубы под углом

Вы можете сослаться здесь , возможно, дублирующая тема. 

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