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"

    }
 ]

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

当我开始写“c”这个词时，我希望 rick 消失，现在默认行为是，仍然显示所有（c 在 rick 中间）。

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

如果输入中没有值，我想查看全部，如果我开始写，我想查看 firstName 的确切值。如果我写“m”，则不应显示任何名称，因为没有一个名称以 m 开头。我希望根据名称和行业进行搜索，而不是根据 img。请帮忙。

标签： angular

由于您使用的是 Typescript 和 angular 5 ，因此您可以使用 ES6 方法与调用的字符串一起使用，该方法startsWith仅在值存在于起始索引时才返回 true。

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

自定义管道 startWith

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

  } 
}

在 app.component 中使用 ngModel

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

<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

编辑：要显示结果，如果名字或行业的起始字符与键入的字符匹配，那么您需要更改管道，如下所示

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

angular - 角度5中的自定义过滤器搜索

问题描述

解决方案

推荐阅读