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

Question

Мне нужно выделить алфавит в списке поиска вместо выделения всего слова. Здесь я фильтрую список memberOffice и memberFacilities по алфавиту, который я даю при поиске, поэтому весь ребенок выделяется. но теперь, основываясь на отфильтрованном содержимом, а не на выделении всей строки, мне нужно выделить конкретный алфавит, который я использовал для поиска, если он также содержит более 1 алфавита, его нужно выделить. В общем, мне нужно выделить алфавиты в отфильтрованном списке на основе алфавитов, которые я набрал в поле поиска. Нужна помощь.

Заранее спасибо.

TS:

searchFacility(search) {
    this.sLetter = search;
    let memberFacilities = true;
    if (search) {
      this.dtFacilities.expandedRows = [];
      setTimeout(() => {
        this.dtFacilities.expandedRows = this.dtFacilities.value;
        this.dtFacilities.value.forEach(m => {
          m.memberFacilities.forEach(f => {
            let mySearch = search.toLowerCase();
            let facilityName = f.facilityName.toLowerCase();
            if (facilityName && facilityName.includes(mySearch)) {
              f.isShowMember = false;
              memberFacilities = false;
            } else {
              f.isShowMember = true;
            }
          })
        })
        if (memberFacilities) {
          this.dtFacilities.expandedRows = [];
        } 
      }, 100);

    }

  }

}

в HTML, я использовал

[class.searcHighlight]

Я выделяю все слова, используя этот набор кодов. есть некоторые изменения, которые мне нужно сделать, но я не понимаю, как это можно решить.

HTML-код списка:

<p-column field="facilityName" header="Medical Office Name" [sortable]="true">
          <ng-template let-col let-fList="rowData" pTemplate="body">
            <span>
              <a (click)="selectedFacility(fList.facilityID)" [innerHtml]="fList.facilityName | getHtml : sLetter">
                <strong>{{fList.facilityName}}</strong>
              </a>
              (
              <span>{{fList.facilityType}}</span>)
            </span>
          </ng-template>
        </p-column>
DEMO:

Демо

Answer 1

Добавить следующий код в ваш код

app.component.ts

     import { Pipe, PipeTransform } from '@angular/core';
        import { DomSanitizer } from '@angular/platform-browser'


    @Pipe({ name: 'getHtml' })
export class HighlihtText implements PipeTransform {
  constructor(private sanitized: DomSanitizer) { }
  transform(value, searchText) {
    if(searchText=='' || !searchText){
      return value;
    }
    console.log("value="+value)
    var str = value.toLowerCase();
    searchText=searchText.toLowerCase();
    var currHtml = "";
    var ind = -1;
    while (str.indexOf(searchText) >= 0) {
      ind = str.indexOf(searchText);
      createHtml(value.substr(0, ind),value.substr(ind,searchText.length))
      str = str.substr(ind + searchText.length)
      value=value.substr(ind + searchText.length);
    }
    if (str.length > 0) {
      currHtml = currHtml + str;
    }
    function createHtml(nohighlighText,match) {
      console.log(nohighlighText)
      currHtml = currHtml + nohighlighText + "<span class=\"searcHighLight\" >" + match + "</span>"
    }
    return this.sanitized.bypassSecurityTrustHtml(currHtml);
  }

}

В app.component.html изменить часть, гдеВы выделяете результат поиска в

<a class="userlist" (click)="selectedFacility(memberFacility.facilityID)" [innerHtml]="memberFacility.facilityName | getHtml : sLetter">
                      </a>

В app.module.ts объявляете недавно созданный канал

import { AppComponent ,HighlihtText} from './app.component';

 declarations: [ AppComponent, HelloComponent,facilityFilterPipe,HighlihtText ],

Для проблемы поиска ALLсо сбросом изменений app.component.ts добавить следующую строку в конце метода searchFacility (..)

if(search==''){
      this.searchFname="";
    }

и инициализировать переменную searchFname следующим образом

 searchFname:String;

Для элемента Highligting fList, изменить

<a (click)="selectedFacility(fList.facilityID)" [innerHtml]="fList.facilityName | getHtml : sLetter">

На

<a (click)="selectedFacility(fList.facilityID)">
                <strong  *ngIf="sLetter!=''" [innerHtml]="fList.facilityName | getHtml : sLetter"></strong>
                <strong *ngIf="sLetter==''">{{fList.facilityName}}</strong>
              </a>

и инициализируйте sLetter в app.component.ts ngOnInit() как

this.sLetter="";

URL-адрес StackBlitz: https://stackblitz.com/edit/angular-ku9aaj

Дайте мне знать, если у вас есть какие-либо вопросы