Как применить подсветку к материалу фильтра данных - PullRequest
Новая
       35

Как применить подсветку к материалу фильтра данных

0 голосов
/ 26 февраля 2019

Я хочу выделить текст, который ищется в поле фильтра данных, я использую таблицу данных материала с углом.Я создаю канал для выделения и отправляю текстовый поиск в виде arg 

export class HighlightSearchPipe implements PipeTransform {
 private destroyed$: Subject<void> = new ReplaySubject(1);

 constructor( private sanitizer: DomSanitizer) {}

transform(value: any, args?: any): any {
   if (!value) {
   return observableOf(value);
  }

/** Data table filtering */
if (args) {
  const searchText = args[0];
  const re = new RegExp(searchText, 'gi');
  const match = value.match(re);
  // If there's no match, just return the original value.
  if (!match) {
    return value;
  }
  value = value.replace(re, '<mark class="saqr-first-mark">' + match[0] + '</mark>');
  return observableOf(value);
}

, а в файле машинописного материала материала добавляю выделение в конструктор 

constructor(
private highlight: HighlightSearchPipe,
 ) {}

applyFilter() {
 this.dataSource.filter = this.searchKeyword.trim().toLowerCase();
 this.highlight.transform(this.dataSource.filter, this.searchKeyword);  
// here cannot detect that 
}

Что выпредложить сделать для таблицы данных подсветку искомого текста?

1 Ответ

0 голосов
/ 26 февраля 2019

Мне удалось создать рабочую демонстрацию этого.Мой класс HighlightSearchPipe выглядит следующим образом: 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'highlightSearch'
})
export class HighlightSearchPipe implements PipeTransform {

  transform(value: string, search: string): string {
    const valueStr = value + ''; // Ensure numeric values are converted to strings
    return valueStr.replace(new RegExp('(?![^&;]+;)(?!<[^<>]*)(' + search + ')(?![^<>]*>)(?![^&;]+;)', 'gi'), '<strong class="your-class">$1</strong>');
  }
}

Я изменил класс Typescript, который содержит функцию applyFilter(), следующим образом:

i.Добавлена ​​переменная класса filterText, чтобы текст фильтра, набранный пользователем, был доступен в HTML.Эта переменная обновляется в функции applyFilter()

ii.Удален вызов this.highlight.transform(this.dataSource.filter, this.searchKeyword); в applyFilter()

@Component({
  ...
})
export class TableFilteringExample {
  ...
  filterText = '';

  applyFilter(filterValue: string) {
    this.filterText = filterValue.trim();
    this.dataSource.filter = this.filterText.toLowerCase();
  }
}

В компоненте HTML я изменил способ рендеринга ячеек с: 

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let element">{{element.name}}</td>
</ng-container>

на: 

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let element" [innerHTML]="element.name | highlightSearch: filterText"></td>
</ng-container>

Таким образом, значение ячейки (в данном случае element.name) может отображать HTML.Для преобразования значения и выделения его части, соответствующей фильтру, используется канал highlightSearch.

...