Angular 2过滤器/搜索列表

Question

我正在寻找有角度的2种方法来做到这一点.

我只是有一个项目列表,我想做一个输入,工作是过滤列表.

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

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

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

Answer 1

按多个字段搜索

假设数据:

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

  }
}

一切都行!

Answer 2

您必须通过保持监听器input事件来每次根据输入的更改手动筛选结果.在进行手动过滤时,请确保您应该保留两个变量副本,其中一个是原始集合副本,第二个是filteredCollection副本.这种方式的优势可以节省您在变更检测周期中不必要的过滤.您可能会看到更多代码,但这会更加友好.

标记 - 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.

Answer 3

的HTML

<input [(ngModel)] = "searchTerm" (ngModelChange) = "search()"/>
<div *ngFor = "let item of items">{{item.name}}</div>

零件

search(): void {
    let term = this.searchTerm;
    this.items = this.itemsCopy.filter(function(tag) {
        return tag.name.indexOf(term) >= 0;
    }); 
}

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

Answer 4

数据

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

您可以通过创建简单的管道来实现此目的

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

管

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

@Pipe({
    name: 'FilterPipe',
})
export class FilterPipe implements PipeTransform {
    transform(value: any, input: string) {
        if (input) {
            input = input.toLowerCase();
            return value.filter(function (el: any) {
                return el.toLowerCase().indexOf(input) > -1;
            })
        }
        return value;
    }
}

这将根据搜索词过滤结果

更多信息

Answer 5

在角度2中,我们没有像AngularJs那样预定义的过滤器和顺序,我们需要根据我们的要求创建它.这是时间的杀戮,但我们需要这样做,(参见No FilterPipe或OrderByPipe).在本文中,我们将看到如何在角度2和称为Order By的排序功能中创建名为pipe的过滤器.让我们使用一个简单的虚拟json数据数组.这是我们将用于示例的json

首先,我们将使用搜索功能查看如何使用管道(过滤器):

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

    import { Component, OnInit } from '@angular/core';
    @Component({
      selector: 'app-category',
      templateUrl: './category.component.html'
    })
    export class CategoryComponent implements OnInit {

      records: Array<any>;
      isDesc: boolean = false;
      column: string = 'CategoryName';
      constructor() { }

      ngOnInit() {
        this.records= [
          { CategoryID: 1,  CategoryName: "Beverages", Description: "Coffees, teas" },
          { CategoryID: 2,  CategoryName: "Condiments", Description: "Sweet and savory sauces" },
          { CategoryID: 3,  CategoryName: "Confections", Description: "Desserts and candies" },
          { CategoryID: 4,  CategoryName: "Cheeses",  Description: "Smetana, Quark and Cheddar Cheese" },
          { CategoryID: 5,  CategoryName: "Grains/Cereals", Description: "Breads, crackers, pasta, and cereal" },
          { CategoryID: 6,  CategoryName: "Beverages", Description: "Beers, and ales" },
          { CategoryID: 7,  CategoryName: "Condiments", Description: "Selishes, spreads, and seasonings" },
          { CategoryID: 8,  CategoryName: "Confections", Description: "Sweet breads" },
          { CategoryID: 9,  CategoryName: "Cheeses",  Description: "Cheese Burger" },
          { CategoryID: 10, CategoryName: "Grains/Cereals", Description: "Breads, crackers, pasta, and cereal" }
         ];
         // this.sort(this.column);
      }
    }

<div class="col-md-12">
  <table class="table table-responsive table-hover">
    <tr>
      <th >Category ID</th>
      <th>Category</th>
      <th>Description</th>
    </tr>
    <tr *ngFor="let item of records">
      <td>{{item.CategoryID}}</td>
      <td>{{item.CategoryName}}</td>
      <td>{{item.Description}}</td>
    </tr>
  </table>
</div>

2.此代码中没有任何特殊内容只是使用类别列表初始化我们的记录变量,声明了另外两个变量isDesc和column,我们将使用它们对后者进行排序.最后添加了this.sort(this.column); 后者我们将使用,一旦我们将有这种方法.

注意templateUrl:'./ category.component.html',我们将在旁边创建以tabluar格式显示记录.

为此,创建一个名为category.component.html的HTML页面,其代码如下:

3.我们使用ngFor重复记录并逐行显示,尝试运行它,我们可以看到表中的所有记录.

搜索 - 过滤记录

假设我们想按类别名称搜索表格,为此我们添加一个文本框来输入和搜索

<div class="form-group">
  <div class="col-md-6" >
    <input type="text" [(ngModel)]="searchText" 
           class="form-control" placeholder="Search By Category" />
  </div>
</div>

5.现在我们需要创建一个管道来按类别搜索结果,因为过滤器不再可用,因为它已经在angularjs中了.

创建一个文件category.pipe.ts并在其中添加以下代码.

    import { Pipe, PipeTransform } from '@angular/core';
    @Pipe({ name: 'category' })
    export class CategoryPipe implements PipeTransform {
      transform(categories: any, searchText: any): any {
        if(searchText == null) return categories;

        return categories.filter(function(category){
          return category.CategoryName.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
        })
      }
    }

6.在转换方法中,我们接受列表中的类别列表和搜索文本以搜索/过滤记录.将此文件导入我们的category.component.ts文件,我们想在此处使用它,如下所示:

import { CategoryPipe } from './category.pipe';
@Component({      
  selector: 'app-category',
  templateUrl: './category.component.html',
  pipes: [CategoryPipe]   // This Line       
})

7.我们的ngFor循环现在需要让我们的管道来过滤记录,所以把它改成这个.你可以看到下图中的输出

在此输入图像描述