如何突出显示搜索的字符串而不是Angular 4 Material表中的完整行或单元格？

Question

使用Angular材质表来显示数据并使用过滤功能搜索数据。现在我想突出显示搜索的字符串，而不是Angular 4 Material表中的完整行或单元格。

Answer 1

您可以尝试通过将HTML标签用作<b>result</b>（或什至<span class="highlight">result</span>来使用自定义样式）来突出显示匹配结果。为了查看单元格内的HTML内容，必须使用[innerHTML]=cellText属性绑定而不是插值{{cellText}}。

一个例子如下：

<mat-cell *matCellDef="let document" [innerHTML]="document.description"></mat-cell>

document.description已包含用于突出显示的HTML标签。

有关更多信息，请参见https://alligator.io/angular/innerhtml-binding-angular/