如何在 angular 2 material table 的搜索结果中加粗搜索模式

Question

我搜索了 "ium"。 3 行匹配并显示在搜索结果中。我现在如何在 iphone phone 目录搜索等搜索结果中将 "ium" 加粗。运行演示和代码是 here

Answer 1

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

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

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

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

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

Stack Overflow 答案归功于 Fahad Nisar

Answer 2

也许这个bold.pipe.ts

transform(value: any, search: any): any {
 if (!search) { return value; }
 let searchLength = search.length;
 let holder = value.split('');
 let indexAdder = 0;
 let indexs = this.locations(search.toLowerCase(), value.toLowerCase() )
 indexs = indexs.map( (x) => {
  let solution =  x + indexAdder;
  indexAdder += 2;
  return solution;
 })
 indexs.forEach( (i) => {
  holder.splice(i, 0 , "<span class='bold'>")
  holder.splice(i + searchLength +1, 0,  "</span>")
 })
 return holder.join('');
}

locations(substring, searchValue) {
 let indexs = [], i = -1;
 while((i = searchValue.indexOf(substring, i + 1 )) >= 0) {
  indexs.push(i);
 }
 return indexs;
}

然后在你的 component.html

<td [innerHTML]="a.value | bold: getSearchInputValue()">{{a.value}}</td>

如何在 angular 2 material table 的搜索结果中加粗搜索模式

how to bold search pattern in search results in angular 2 material table

javascript

typescript

angular-material

angular-material2

angular