Angular 角度2过滤器/搜索列表

我在寻找角度2的方法

我只是有一个项目列表，我想输入谁的工作是过滤列表

<md-input placeholder="Item name..." [(ngModel)]="name"></md-input>

<div *ngFor="let item of items">
{{item.name}}
</div>

{{item.name}

---

在Angular 2中的实际操作方法是什么？这需要管道吗？

您必须根据每次输入的变化手动过滤结果，方法是让侦听器保持在

输入

事件之上。在进行手动筛选时，请确保维护变量的两个副本，一个是原始集合副本，另一个是

filteredCollection

copy。这样做的好处是可以在变更检测周期中节省一些不必要的过滤。您可能会看到更多的代码，但这会对性能更友好

标记-HTML模板

<md-input #myInput placeholder="Item name..." [(ngModel)]="name" (input)="filterItem(myInput.value)"></md-input>

<div *ngFor="let item of filteredItems">
   {{item.name}}
</div>

assignCopy(){
   this.filteredItems = Object.assign([], this.items);
}
filterItem(value){
   if(!value){
       this.assignCopy();
   } // when nothing has typed
   this.filteredItems = Object.assign([], this.items).filter(
      item => item.name.toLowerCase().indexOf(value.toLowerCase()) > -1
   )
}
this.assignCopy();//when you fetch collection from server.

您还可以创建一个过滤器来过滤结果：

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

@Pipe({
  name : 'searchPipe',
})
export class SearchPipe implements PipeTransform {
  public transform(value, key: string, term: string) {
    return value.filter((item) => {
      if (item.hasOwnProperty(key)) {
        if (term) {
          let regExp = new RegExp('\\b' + term, 'gi');
          return regExp.test(item[key]);
        } else {
          return true;
        }
      } else {
        return false;
      }
    });
  }
}

在HTML中使用管道：

<md-input placeholder="Item name..." [(ngModel)]="search" ></md-input>
<div *ngFor="let item of items | searchPipe:'name':search ">
  {{item.name}}
</div>

{{item.name}

HTML

请注意，this.items等于this.items，应在执行搜索之前进行设置。

数据

names = ['Prashobh','Abraham','Anil','Sam','Natasha','Marry','Zian','karan']

您可以通过创建一个简单的管道来实现这一点

<input type="text" [(ngModel)]="queryString" id="search" placeholder="Search to type">

这将根据搜索词过滤结果

---

按多个字段搜索

假设数据：

items = [
  {
    id: 1,
    text: 'First item'
  },
  {
    id: 2,
    text: 'Second item'
  },
  {
    id: 3,
    text: 'Third item'
  }
];

<input [(ngModel)]="query">
<div *ngFor="let item of items | search:'id,text':query">{{item.text}}</div>

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

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || []).filter(item => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

  }
}

标记：

items = [
  {
    id: 1,
    text: 'First item'
  },
  {
    id: 2,
    text: 'Second item'
  },
  {
    id: 3,
    text: 'Third item'
  }
];

<input [(ngModel)]="query">
<div *ngFor="let item of items | search:'id,text':query">{{item.text}}</div>

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

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || []).filter(item => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

  }
}

---

一条线代表一切

在angular 2中，我们没有像AngularJs那样预定义的过滤器和排序依据，我们需要根据我们的需求创建它。这是在浪费时间，但我们需要这样做（请参阅无过滤器管道或OrderByPipe）。在本文中，我们将看到如何在angular 2中创建名为pipe的过滤器和名为Order By的排序功能。让我们为它使用一个简单的伪json数据数组。下面是我们将用于示例的json

首先，我们将了解如何使用搜索功能使用管道（过滤器）：

创建名为category.component.ts的组件

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“应用程序类别”，
templateUrl:“./category.component.html”
})
导出类CategoryComponent实现OnInit{
记录：数组；
isDesc:boolean=false；
列：string='CategoryName'；
构造函数（）{}
恩戈尼尼特（）{
此。记录=[
{类别ID:1，类别名称：“饮料”，描述：“咖啡，茶”}，
{CategoryID:2，CategoryName:“调味品”，描述：“甜而香的酱汁”}，
{CategoryID:3，CategoryName:“糖果”，描述：“甜点和糖果”}，
{CategoryID:4，CategoryName:“奶酪”，描述：“斯梅塔纳、夸克和切达奶酪”}，
{CategoryID:5，CategoryName:“谷物/谷物”，描述：“面包、饼干、意大利面和谷物”}，
{CategoryID:6，CategoryName:“饮料”，描述：“啤酒和啤酒”}，
{CategoryID:7，CategoryName:“调味品”，描述：“调味酱、酱和调味品”}，
{CategoryID:8，CategoryName:“糖果”，描述：“甜面包”}，
{CategoryID:9，CategoryName:“奶酪”，描述：“奶酪汉堡”}，
{CategoryID:10，CategoryName:“谷物/谷物”，描述：“面包、饼干、意大利面和谷物”}
];
//this.sort（this.column）；
}
}

类别ID
类别
描述
{{item.CategoryID}
{{item.CategoryName}
{{item.Description}

对@Mosche answer，进行轻微修改，以便在没有滤芯的情况下进行处理。

TS：

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

@Pipe({
    name: 'filterFromList'
})
export class FilterPipe implements PipeTransform {
    public transform(value, keys: string, term: string) {

        if (!term) {
            return value
        }
        let res = (value || []).filter((item) => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));
        return res.length ? res : [-1];

    }
}

现在，在HTML中，您可以通过“-1”值进行检查，但没有结果

HTML：

<div *ngFor="let item of list | filterFromList: 'attribute': inputVariableModel">
            <mat-list-item *ngIf="item !== -1">
                <h4 mat-line class="inline-block">
                 {{item}}
                </h4>
            </mat-list-item>
            <mat-list-item *ngIf="item === -1">
                No Matches
            </mat-list-item>
        </div>

{{item}}
没有火柴

在Angular 2+中，这是一种很好的方法，可以直接从模板转换和格式化数据

管道允许我们更改模板内部的数据；i、 过滤、排序、格式化日期、数字、货币等。一个简单的例子是，通过在模板代码中应用一个简单的过滤器，可以将字符串转换为小写

来自的内置管道列表

---

角度版本4.4.7的示例<代码>ng版本

---

它接受多个参数

HTML « *ngFor="let student of students | jsonFilterBy:[searchText, 'name'] "
TS   « transform(json: any[], args: any[]) : any[] { ... }

使用管道过滤内容«

json过滤器by.Pipe.ts

从'@angular/core'导入{Pipe，PipeTransform，Injectable}；
@管道（{name:'jsonFilterBy'}）
@可注射（）
导出类JsonFilterByPipe实现PipeTransform{
转换（json:any[]，args:any[]）：any[]{
var searchText=args[0]；
var jsonKey=args[1]；
//json=未定义，args=（2）[未定义，“名称”]
if（searchText==null | | searchText==undefined）返回json；
if（jsonKey==null | | jsonKey==undefined）返回json；
//将原始数组的所有对象复制到新数组中。
var returnObjects=json；
forEach（函数（FilterObjectEntry）{
if（FilterObjectEntry.hasOwnProperty（jsonKey））{
log（'搜索键在JSON对象中可用'）；
如果（过滤器对象输入的类型[jsonKey]！=“未定义”&&
FilterObjectEntry[jsonKey].toLowerCase（）.indexOf（searchText.toLowerCase（））>-1）{
//对象值包含用户提供的文本。
}否则{
//对象与筛选器值不匹配，因此通过筛选器将其从数组中删除
returnObjects=returnObjects.filter（obj=>obj！==FilterObjectEntry）；
}
}否则{
log（'搜索键在JSON对象中不可用'）；
}
})
归还物品；
}
}

添加到

@NgModule

«将

JsonFilterByPipe

添加到模块中的声明列表中；如果忘记执行此操作，您将得到一个错误，没有提供

json的提供者
HTML « *ngFor="let student of students | jsonFilterBy:[searchText, 'name'] "
TS   « transform(json: any[], args: any[]) : any[] { ... }

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

@Pipe({ name: 'jsonFilterBy' })
@Injectable()
export class JsonFilterByPipe implements PipeTransform {

  transform(json: any[], args: any[]): any[] {
    const searchText = args[0];
    const jsonKey = args[1];
    let jsonKeyArray = [];

    if (searchText == null || searchText === 'undefined') { return json; }

    if (jsonKey.indexOf(',') > 0) {
        jsonKey.split(',').forEach( function(key) {
            jsonKeyArray.push(key.trim());
        });
    } else {
        jsonKeyArray.push(jsonKey.trim());
    }

    if (jsonKeyArray.length === 0) { return json; }

    // Start with new Array and push found objects onto it.
    let returnObjects = [];
    json.forEach( function ( filterObjectEntry ) {

        jsonKeyArray.forEach( function (jsonKeyValue) {
            if ( typeof filterObjectEntry[jsonKeyValue] !== 'undefined' &&
            filterObjectEntry[jsonKeyValue].toLowerCase().indexOf(searchText.toLowerCase()) > -1 ) {
                // object value contains the user provided text.
                returnObjects.push(filterObjectEntry);
                }
            });

    });
    return returnObjects;
  }
} 

jsonFilterBy:[ searchText, 'name']

jsonFilterBy:[ searchText, 'name, other, other2...']

<md-input placeholder="Item name..." [(ngModel)]="name" (keyup)="filterResults()"></md-input>

<div *ngFor="let item of filteredValue">
{{item.name}}
</div>

  filterResults() {
    if (!this.name) {
      this.filteredValue = [...this.items];
    } else {
      this.filteredValue = [];
      this.filteredValue = this.items.filter((item) => {
        return item.name.toUpperCase().indexOf(this.name.toUpperCase()) > -1;
      });
    }
 }

<md-input #myInput placeholder="Item name..." [(ngModel)]="name"></md-input>

<div *ngFor="let item of filteredItems | search: name">
   {{item.name}}
</div>

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

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {

  transform(value: any, args?: any): any {

    if(!value)return null;
    if(!args)return value;

    args = args.toLowerCase();

    return value.filter(function(item){
        return JSON.stringify(item).toLowerCase().includes(args);
    });
}

}

<tr *ngFor="let item of items | filter:searchText">
  <td>{{item.name}}</td>
</tr>

let itemsFiltered = new Ng2SearchPipe().transform(items, searchText);