javascript - 如何将自定义管道应用于 ngFor 迭代元素

Question

我有一个自定义管道来突出显示文本。我想将此管道应用于 ngfor 迭代元素。我怎样才能做到这一点？

这是我的代码：

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

@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {
  transform(text: string, search): string {
    if (search && text) {
      let pattern = search.toString().replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
      pattern = pattern.split(' ').filter((t) => {
        return t.length > 0;
      }).join('|');
      const regex = new RegExp(pattern, 'gi');

      return text.toString().replace(regex, (match) => `<span class="search-highlight">${match}</span>`);
    } else {
      return text;
    }
  }
}

:host ::ng-deep .search-highlight{
  background-color: #F2E366;
}

  <tbody>
      <tr *ngFor="let item of (itemsList | highlight)">
          <td><i [ngClass]="{'fa fa-paperclip':item.ext === 'pdf'}"></i></td>
          <td>{{item.name}}<span [innerHTML]="text | highlight: searchTerm"></span></td>
          <td>{{item.path}}</td>
          <td>{{item.dateModification | date:'short':'':'fr'}}</td>
      </tr>
  </tbody>

标签： javascripthtmlangular6

Answer 1

在@ChellappanV 评论之后，特别是这个，我在 search.component.html 中更改了我的代码，如下所示：

<td>{{item.name}}<span [innerHTML]="item.name | highlight: searchTerm.value"></span></td>

代替：

<td>{{item.name}}<span [innerHTML]="text | highlight: searchTerm"></span></td>