javascript - 如何在 Angular 2 Material 表的搜索结果中加粗搜索模式

标签 javascript angular typescript angular-material angular-material2

我搜索了“ium”。 3 行匹配并显示在搜索结果中。我现在如何在搜索结果中仅粗体显示“ium”,例如 iPhone 手机目录搜索。运行演示和代码是 here

最佳答案

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

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

您必须将过滤后的输入值绑定(bind)到管道的参数,因此它看起来像这样:

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

请注意,链接的答案将在空过滤器值上返回未定义。

Stack Overflow 答案记入 Fahad Nisar

关于javascript - 如何在 Angular 2 Material 表的搜索结果中加粗搜索模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52064510/

相关文章:

javascript - W2UI Grid 选择选择类型为 'cell' 的列并右键单击任何单元格?

javascript - 如何根据两个相互依赖的下拉列表的选择编写另一个元素?

javascript - 从这个自定义的静态行生成行表

javascript - "@angular/http"和 "@angular/common/http"中的 Angular 的 httpClient 有什么区别?

css - 在 cdk-virtual-scroll-viewport Angular 之外显示绝对元素

javascript - 当推送到数组时,Typescript undefined 不是一个对象

javascript - Angular 2 Exception : TypeError: 'caller' , 'callee' 和 'arguments' 属性可能在严格模式函数或参数对象上

javascript - 悬停时更改 div 内的图片(带边框)

angular - 使用 ngFor 的内联样式背景图像

reactjs - 属性 '[Symbol.observable]' 在类型 'Store<ApplicationState>' 中缺失,但在类型 'Store<any, AnyAction>' 中需要。 TS2741