如何在角度2材质表的搜索结果中加粗搜索模式

Question

我搜索了“ ium”。 3行匹配并显示在搜索结果中。现在，我该如何在搜索结果（如iPhone手机目录搜索）中仅加粗“ ium”。正在运行的演示和代码为here

Answer 1

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

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

您将不得不将过滤后的输入的值绑定到管道的参数，因此看起来像这样：

<td>{{ element.name | bold: filter }}</td>， filter是搜索值。

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

堆栈溢出答案记入Fahad Nisar