Question

 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"

    }
 ]

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

当我开始写单词＆＃34; c＆＃34;时，我希望rick消失，现在默认行为是，所有仍然显示（c在rick的中间）。

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

如果输入中没有值，我想看所有，如果我开始写，我想通过firstName看到确切的一个。如果我写＆＃34; m＆＃34;什么都不应该显示，因为没有名字以m开头。我希望在名称和行业的基础上进行搜索，但不要在img的基础上进行搜索。请帮忙。

Answer 1

当您使用Typescript和angular 5时，您可以使用名为startsWith的字符串提供的ES6方法，仅当该值出现在起始索引处时才返回true。

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

自定义管道启动

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

自定义过滤器搜索角度5

1 个答案: