角度5中的自定义过滤器搜索 [英] custom filter search in angular 5

问题描述

 data : [
    {
       id :1,
       name : "client A",
       industry: "Industry 1",
       img:"https://abc"

    },
    {
       id :2,
       name : "client Ab",
       industry: "Industry 2",
       img:"https://abc"

    },
    {
       id :3,
       name : "client megha",
       industry: "Industry 5",
       img:"https://abc"

    },
    {
       id :4,
       name : "shubham",
       industry: "Industry 1",
       img:"https://abc"

    },
    {
       id :4,
       name : "rick",
       industry: "Industry 1",
       img:"https://abc"

    }
 ]

我希望过滤器执行以下操作:

I want the filter to do the follwing:

当我开始写单词"c"时，我希望该rick消失，现在默认行为是，所有内容仍然显示(c位于rick的中间).

When i start writing the word "c", i want the rick to disappear, right now the default behavior is, all are still shown (the c is in the middle of rick).

严格模式是我不想使用的东西，我想要的行为是:

strict mode is something that i dont want to use, the behavior i want is:

如果输入中没有任何值，那么我想查看全部内容，如果我开始写，我希望通过firstName查看确切的值.如果我写"m"，则不应显示任何内容，因为名称均不以m开头.我想根据名称和行业进行搜索，但不希望基于img进行搜索.请帮忙.

if there is no value in the input, i want to see all, if i start to write i want to see the exact one by firstName. if i write "m" nothing should be displayed as none of the names start with m. i want the search on the basis of names and industry but not on the basis of img. please help.

推荐答案

当您使用Typescript和angular 5时，因此可以使用ES6方法，该方法可用于名为 startsWith 的字符串，该字符串仅在以下情况下返回true:该值出现在起始索引处.

As you are using Typescript and angular 5 , so you can use the ES6 method available with strings called startsWith which returns true only if the value is present at the starting index.

您可以使用 startsWith 方法创建一个成角度的自定义管道，以根据您在文本框中键入的内容过滤掉数据.例如，如果您 r ，它将仅返回 rick .对于此示例，我将遵循不区分大小写的搜索.检查下面的代码

You can create a custom pipe in angular with startsWith method to filter out the data based on what you type in the textbox. For example if you r then it will only return rick . For this example I am following a case insensitive search. Check the code below

自定义管道启动方式

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

@Pipe({name: 'startsWith'})
export class startsWithPipe implements PipeTransform {
  transform(value: any[], term: string): any[] {
    return value.filter((x:any) => x.name.toLowerCase().startsWith(term.toLowerCase()))

  } 
}

在ngModel中使用app.component

app.component.ts

app.component.ts

import { Component } from '@angular/core';
import {startsWithPipe} from './customstart.pipes';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  query:string = '';
   data = [
    {
       id :1,
       name : "client A",
       industry: "Industry 1"

    },
    {
       id :2,
       name : "client Ab",
       industry: "Industry 2"

    },
    {
       id :3,
       name : "client megha",
       industry: "Industry 5"

    },
    {
       id :4,
       name : "shubham",
       industry: "Industry 1"

    },
    {
       id :4,
       name : "rick",
       industry: "Industry 1"

    }
 ]
}

app.component.html

app.component.html

<input type="text" [(ngModel)]="query">
<ul>
<li *ngFor="let item of data | startsWith : query">{{item.name}}</li>
</ul>

这是一个有效的演示: https://stackblitz.com/edit/angular-custom-pipes-mkah47

Here is a working demo : https://stackblitz.com/edit/angular-custom-pipes-mkah47

要显示结果，如果名字或行业的开头字符与键入的字符匹配，则需要像下面一样更改管道

Edit : To show the results if either the starting character of the firstname or industry matches the typed character then you need to change your pipe like below

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


    @Pipe({name: 'startsWith'})
    export class startsWithPipe implements PipeTransform {
      transform(value: any[], term: string): any[] {
        return value.filter((x:any) => x.name.toLowerCase().startsWith(term.toLowerCase()) || x.industry.toLowerCase().startsWith(term.toLowerCase()))

      } 
    }

这是要测试的样本数据

data = [
    {
       id :1,
       name : "client A",
       industry: "Tech"

    },
    {
       id :2,
       name : "client Ab",
       industry: "Tourism"

    },
    {
       id :3,
       name : "client megha",
       industry: "Hotel"

    },
    {
       id :4,
       name : "shubham",
       industry: "Retail"

    },
    {
       id :4,
       name : "rick",
       industry: "IT"

    }
 ]

我在这里更新了示例: https://stackblitz.com/edit/angular-custom-pipes-mkah47

I have updated the example here : https://stackblitz.com/edit/angular-custom-pipes-mkah47

这篇关于角度5中的自定义过滤器搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！