效果图如下

1、声明一个pipe

import {Pipe, Injectable, PipeTransform} from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
@Pipe({
name: 'keyword'
})
@Injectable()
export class KeywordPipe implements PipeTransform {
constructor(private sanitizer:DomSanitizer){}
transform(val: string, keyword: string):any { let Reg=new RegExp(keyword,"i");
if(val){
let res = val.replace( Reg,`<span style="color: #ff2424;">${keyword}</span>`);
console.log(res)
return this.sanitizer.bypassSecurityTrustHtml(res);
}
}
} 注意:DomSanitizer,这个的目的是是数据在页面上的绑定能够safe的解析
2.在页面中使用
<ion-item class="list-data" *ngFor="let item of bonds?.result"
(click)="productUtils.showDetail(item.internal_code,'bond',item.is_pi_only)">
<span class="company-name" [innerHTML]="item.name | keyword:keyword"></span><span class="code" [innerHTML]="item.internal_code | keyword:keyword"></span>
</ion-item>
在<ion-item>标签里面用新的标签包起来,不然会有样式问题; 要用innerHTML来绑定数据。

angular2 pipe实现搜索结果中的搜索关键字高亮的更多相关文章

  1. 用Java实现自动打开浏览器在搜索框中进行搜索

    主要使用了Java的剪切板操作和Robot类 上代码: package pers.jeaven.AutoRobot.main; import java.awt.Desktop; import java ...

  2. vue2实现搜索结果中的搜索关键字高亮

    // 筛选变色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && k ...

  3. SAP CRM 在Web UI中创建搜索帮助

    多数情况下,在Web UI为一个特定的字段提供搜索帮助需要在事务SE11中创建搜索帮助. (注:也可以通过在SE24中创建一个类并实现实现IF_BSP_WD_CUSTOM_F4_CALLBACK接口来 ...

  4. 第七章 人工智能,7.6 DNN在搜索场景中的应用(作者:仁重)

    7.6 DNN在搜索场景中的应用 1. 背景 搜索排序的特征分大量的使用了LR,GBDT,SVM等模型及其变种.我们主要在特征工程,建模的场景,目标采样等方面做了很细致的工作.但这些模型的瓶颈也非常的 ...

  5. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

  6. 详细解读Android中的搜索框—— SearchView

    以前总是自己写的 今天看看别人做的 本篇讲的是如何用searchView实现搜索框,其实原理和之前的没啥差别,也算是个复习吧. 一.Manifest.xml 这里我用一个activity进行信息的输入 ...

  7. 在stream流和byte[]中查找(搜索)指定字符串

    在 stream流 和 byte[] 中查找(搜索)指定字符串 这里注重看的是两个 Search 的扩展方法,一个是 stream 类型的扩展,另一个是 byte[] 类型的扩展, 如果大家有更好的“ ...

  8. 理解Lucene索引与搜索过程中的核心类

    理解索引过程中的核心类 执行简单索引的时候需要用的类有: IndexWriter.ƒDirectory.ƒAnalyzer.ƒDocument.ƒField 1.IndexWriter IndexWr ...

  9. extjs在窗体中添加搜索框

    在extjs中添加搜索框,搜索框代码如下: this.searchField = new Ext.ux.form.SearchField({            store : this.store ...

随机推荐

  1. GreenDao 使用和数据库升级

    1使用方法 一.添加依赖 在bulid.gradle文件下的dependencies下添加所需依赖   compile 'org.greenrobot:greendao:3.2.2' // add l ...

  2. uva12545

    #include<iostream> using namespace std; +; char s[maxn],t[maxn]; int main(){ //freopen("1 ...

  3. HTML5基础标签

    块级元素 1.独占一行,不和其他元素待在同一行 2.能设置宽高 标签 是否为单标签 标签属性  备注 <h1></h1>......<h6><h6> 双 ...

  4. 【2017-05-02】winform弹出警告框选择性操作、记事本制作、对话框控件和输入输出流

    一.winform弹出警告框选择性操作 MessageBox.Show()返回一个枚举类值(第一个参数为弹出窗口显示的内容,第二个参数为弹出窗口的标题,第三个参数为弹出窗口包含的按钮) 先新建一个变量 ...

  5. Spring 工具包

    Spring 工具包: spring-core-.RELEASE.jar!\org\springframework\util

  6. 解决 img 标签上下出现的间隙

    我们在平常的开发过程中,经常需要使用多张图片,而使用多张图片的时候,一般会去使用一个列表来对我们的img进行承装.就算我们把img的外边距和内边距全部清空了,但是这时会发现图片上下单会多出一定的间隙. ...

  7. Quartz Scheduler misfireThreshold属性的意义与触发器超时后的处理策略

    Quartz misfireThreshold属性的意义与触发器超时后的处理策略. 在配置quartz.properties有这么一个属性就是misfireThreshold,用来指定调度引擎设置触发 ...

  8. jQuery创建、删除和修改html标签

    1.在父标签内创建子标签,新创建的子标签放在父标签最下面 $(parent).append(son).$(son).appendTo(parent) <div class="d&quo ...

  9. ant_<target>标签含义与使用

    <target>标记目标 目标是一个或多个任务的集合,任务是一段可执行的代码:构建文件中包含一个项目,在项目内部声明了所有目标: <target name = "run&q ...

  10. vue-cli 构建项目在IE中无法运行解决方式(build之后可运行)

    IE浏览器(只考虑IE11,更低版本我没考虑)运行时报 Promise未定义的错误 解决办法: 1. 安装babel-polyfill (1.)  npm install babel-polyfill ...