Question

我想突出显示在datatable过滤器字段中搜索的文本，我正在使用带有角度的材质数据表。我为突出显示创建了一个管道，并将文本搜索作为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 
}

您建议对突出显示搜索到的文本的数据表做什么？

Answer 1

我设法产生了一个working demo。我的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>');
  }
}

我修改了包含applyFilter()函数的Typescript类，如下所示：

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管道来转换值并突出显示与过滤器匹配的部分。

如何为物料数据表过滤器应用突出显示

1 个答案: