如何突出显示角度 6 中的输入字段文本 [英] How to highlight an input field text in angular 6

问题描述

这是(custom.component.html)文件

 <div *ngFor="let s of filteredScreenshots">{{s |json}}

<mat-card class="example-card" *ngFor="letfilteredScreen of过滤屏幕"让我=索引><mat-card-header><div mat-card-avatar class="example-header-image" ><img mat-card-image class="list-img" src="{{filteredScreen?.img}}" >

<mat-card-content class="names"><b>{{filteredScreen?.name }}</b></mat-card-content></mat-card-header></mat-card>

这是(customer.component.ts)

 import { Component, OnInit } from '@angular/core';从 '@angular/http' 导入 { Http };从'rxjs/operators'导入{地图}import * as _ from 'lodash';@成分({选择器:'ylb-customer',templateUrl: './customer.component.html',styleUrls: ['./customer.component.css']})导出类 CustomerComponent {spaceScreens: Array;过滤屏幕 = [];名称:字符串；构造函数(私有 http:Http){this.http.get('assets/app.json').pipe(地图(响应 => response.json().screenshots)).subscribe(res => {this.spaceScreens = this.sortByName(res);//这是我们过滤的对象this.filteredScreens = this.sortByName(res);//初始化完整列表});}onNameChange() {this.filteredScreens=_.filter(this.spaceScreens,(item)=>{console.log(this.name)返回 item.name.toLowerCase().indexOf(this.name.toLowerCase())>-1;});}sortByName = 函数(用户){const byName = 函数(用户 1，用户 2){返回 user1.name.localeCompare(user2.name);};返回 users.slice().sort(byName);};}

这是assets文件夹中的(app.json)json文件

<代码> {截图":[{"img":"assets/img/json_2.jpg","name":"Virat Kohli"},{"img":"assets/img/json_2.jpg",姓名":乔·鲁特"}]}

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

在此处输入图片说明

尝试了很多资源但没有结果

解决方案

在 Chrome 和其他浏览器中(参见 here) 你可以使用这样的组件:

import { Pipe, PipeTransform } from '@angular/core';@管道({名称:'突出显示'})导出类 HighlightSearch 实现 PipeTransform {变换(值:字符串，参数:字符串):任何{如果(参数和值){值 = 字符串(值)；//确保它是一个字符串const startIndex = value.toLowerCase().indexOf(args.toLowerCase());如果(开始索引！== -1){const matchingString = value.substr(startIndex, args.length);return value.replace(matchingString, "" + matchingString + "");}}返回值；}}

像这样使用:

<mat-card-content class="names"><b [innerHTML]="filteredScreen.name | highlight: name"></b>

This is (custom.component.html) file

         <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>

This is(customer.component.ts)

  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);
    };

}

This is the (app.json)json file present inside assets folder

        {   
        "screenshots":[ 

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

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




            ]        
        }

filtering is happening fine and it is displaying the json data(name) in alphabetical order.I want to highlight the text entering in the field like in mobile contact list as like in attached image.

enter image description here

Tried many resources but no result

解决方案

In Chrome and also in other Browsers (see here) you can use a component like this:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'highlight'
})

export class HighlightSearch implements PipeTransform {

  transform(value: string, args: string): any {
    if (args && value) {
      value = String(value); // make sure its a string
      const startIndex = value.toLowerCase().indexOf(args.toLowerCase());
      if (startIndex !== -1) {
        const matchingString = value.substr(startIndex, args.length);
        return value.replace(matchingString, "<mark>" + matchingString + "</mark>");
      }

    }
    return value;
  }
}

To use like this:

<mat-card-content class="names"><b [innerHTML]="filteredScreen.name | highlight: name"></b></mat-card-content> 

这篇关于如何突出显示角度 6 中的输入字段文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！