如何在angular 6中突出显示输入字段文本

这是（custom.component.html）文件

过滤进行得很好，它按字母顺序显示json数据（名称）。我想突出显示在字段中输入的文本，如移动联系人列表中的文本，如附件图像中的文本

---

在Chrome和其他浏览器中尝试了许多资源，但没有结果（请参阅），您可以使用如下组件：

从'@angular/core'导入{Pipe，PipeTransform}；
@烟斗({
名称：“突出显示”
})
导出类HighlightSearch实现了PipeTransform{
转换（值：字符串，参数：字符串）：任意{
if（参数和值）{
value=String（value）；//确保它是字符串
const startIndex=value.toLowerCase（）.indexOf（args.toLowerCase（））；
如果（startIndex！=-1）{
常量匹配字符串=value.substr（startIndex，args.length）；
返回值.replace（matchingString，“+matchingString+”）；
}
}
返回值；
}
}

要这样使用：

---

在Chrome和其他浏览器中（请参阅），您可以使用如下组件：

从'@angular/core'导入{Pipe，PipeTransform}；
@烟斗({
名称：“突出显示”
})
导出类HighlightSearch实现了PipeTransform{
转换（值：字符串，参数：字符串）：任意{
if（参数和值）{
value=String（value）；//确保它是字符串
const startIndex=value.toLowerCase（）.indexOf（args.toLowerCase（））；
如果（startIndex！=-1）{
常量匹配字符串=value.substr（startIndex，args.length）；
返回值.replace（matchingString，“+matchingString+”）；
}
}
返回值；
}
}

要这样使用：

---

乔尼拉斯的答案很好。。。但我发现这个问题太普遍了，几乎没有可定制性和可访问性（如选择、双击、适当聚焦/模糊等）。我发布了一个快速组件来帮助解决这个问题

希望它也能帮助别人

---

乔尼拉斯的回答很好。。。但我发现这个问题太普遍了，几乎没有可定制性和可访问性（如选择、双击、适当聚焦/模糊等）。我发布了一个快速组件来帮助解决这个问题

希望它也能帮助别人

---

如何更改突出显示颜色，平均标记颜色请将我的答案标记为答案：）在页面底部是一个示例如何更改突出显示颜色，平均标记颜色请将我的答案标记为答案：）在页面底部是一个示例

         <input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange()">
            <div *ngFor="let s of filteredScreenshots">
                {{s | json}}
             </div>


    <mat-card class="example-card" *ngFor="let filteredScreen of 
        filteredScreens"  let i = index>

      <mat-card-header>
         <div mat-card-avatar class="example-header-image" >
              <img mat-card-image class="list-img" src="{{filteredScreen?.img}}" >
        </div>
        <mat-card-content class="names"><b>{{ filteredScreen?.name }}</b></mat-card-content>
      </mat-card-header>
    </mat-card>

  import { Component, OnInit } from '@angular/core';
 import { Http } from '@angular/http'; 
 import { map } from 'rxjs/operators'
 import * as _ from 'lodash';


 @Component({
 selector: 'ylb-customer',
 templateUrl: './customer.component.html',
 styleUrls: ['./customer.component.css']
    })

 export class CustomerComponent  {
    spaceScreens: Array<any>;
    filteredScreens = [];
    name: string;


constructor(private http:Http){
    this.http.get('assets/app.json').pipe(
     map(response => response.json().screenshots)
   )
    .subscribe(res => {
        this.spaceScreens = this.sortByName(res); //this is what we filter against
         this.filteredScreens =  this.sortByName(res);//init with full list
     });
}

onNameChange() {    
    this.filteredScreens=_.filter(this.spaceScreens,(item)=>{
    console.log(this.name)
    return item.name.toLowerCase().indexOf(this.name.toLowerCase())>-1;
        });
    }
sortByName = function(users) {
    const byName = function(user1,user2) {
        return user1.name.localeCompare(user2.name);
        };
     return users.slice().sort(byName);
    };

}

        {   
        "screenshots":[ 

                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Virat Kohli"
                    },

                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Joe Root"
                    }




            ]        
        }