如何在angular 2材料表的搜索结果中加粗搜索模式

【问题标题】：how to bold search pattern in search results in angular 2 material table如何在angular 2材料表的搜索结果中加粗搜索模式
【发布时间】：2019-02-03 11:30:09
【问题描述】：

我搜索了“ium”。 3 行匹配并显示在搜索结果中。我现在如何像 iphone 电话目录搜索一样在搜索结果中将“ium”加粗。运行demo和代码是here

【问题讨论】：

点击演示页面右侧目录中的过滤
使用正则表达式并在运行中扑通一声跨度。比问答更努力，从谷歌开始，比如“突出显示角度过滤结果正则表达式”，然后用一个最小的例子回来:)
感谢正则表达式提示。

标签： javascript angular typescript angular-material angular-material2

【解决方案1】：

一种解决方案是create a custom pipe 并将其应用于每个模板表达式中的内容。

当然，您可以使用<strong></strong> 而不是<mark></mark> 将您的bold.pipe.ts 包装其传入值，这样您的过滤结果就会变为粗体而不是突出显示。

您必须将过滤后输入的值绑定到管道的参数，所以它看起来像这样：

<td>{{ element.name | bold: filter }}</td>, 其中filter 是搜索到的值。

请注意，链接的答案将在空过滤器值上返回 undefined。

堆栈溢出答案记入Fahad Nisar

【讨论】：