Угловой фильтр 2 / список поиска

Вы должны вручную фильтровать результат, основанный на изменении ввода каждый раз, сохраняя прослушиватель над событием input . При ручной фильтрации убедитесь, что вы должны сохранить две копии переменной, одна из которых будет оригинальной копией коллекции, а вторая будет filteredCollection . Преимущество для этого способа могло бы спасти вашу пару ненужных фильтров в процессе обнаружения изменений. Вы можете увидеть больше кода, но это будет более дружелюбным к производительности.

Разметка – HTML-шаблон

  
 {{item.name}}  

Код

 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. 

Поиск по нескольким полям

Предполагая данные:

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

Разметка:

  
{{item.text}} 

Труба:

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

Одна линия для всего!

данные

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

Вы можете добиться этого, создав простую трубу

труба

 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; } } 

Это будет фильтровать результат на основе поискового запроса

Больше информации

В угловом 2 у нас нет предопределенного фильтра и порядка, как это было с AngularJs, нам нужно создать его для наших требований. Время убивать, но мы должны это сделать (см. No FilterPipe или OrderByPipe). В этой статье мы рассмотрим, как мы можем создать фильтр под названием pipe в угловом 2 и функцию сортировки под названием Order By. Давайте использовать для этого простой массив данных 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; 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); } } 

 
 
 
 
Category ID
 
Category
 
Description
 
 
 
{{item.CategoryID}}
 
{{item.CategoryName}}
 
{{item.Description}}
 
 
  

HTML

  
{{item.name}} 

Компонент

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

Обратите внимание, что this.itemsCopy равен this.items и должен быть установлен перед выполнением поиска.

Вы также можете создать поисковый канал для фильтрации результатов:

 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:

  
 {{item.name}}  

Небольшая модификация ответа @Mosche для обработки, если нет элемента фильтра.

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 :

 
  
 {{item}} 
   No Matches   

Трубы в Angular 2+ – отличный способ преобразовать и форматировать данные прямо из ваших шаблонов.

Трубы позволяют нам изменять данные внутри шаблона; т.е. фильтрация, упорядочение, даты форматирования, числа, валюты и т. д. Быстрый пример: вы можете перенести строку в нижний регистр, применяя простой фильтр в коде шаблона.

Список встроенных труб из ^{примеров} списка API

 {{ user.name | uppercase }} 

Пример угловой версии 4.4.7. ng version

Пользовательские каналы, которые принимают несколько аргументов.

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

Фильтрация содержимого с использованием трубы « json-filter-by.pipe.ts

 import { Pipe, PipeTransform, Injectable } from '@angular/core'; @Pipe({ name: 'jsonFilterBy' }) @Injectable() export class JsonFilterByPipe implements PipeTransform { transform(json: any[], args: any[]) : any[] { var searchText = args[0]; var jsonKey = args[1]; // json = undefined, args = (2) [undefined, "name"] if(searchText == null || searchText == 'undefined') return json; if(jsonKey == null || jsonKey == 'undefined') return json; // Copy all objects of original array into new Array. var returnObjects = json; json.forEach( function ( filterObjectEntery ) { if( filterObjectEntery.hasOwnProperty( jsonKey ) ) { console.log('Search key is available in JSON object.'); if ( typeof filterObjectEntery[jsonKey] != "undefined" && filterObjectEntery[jsonKey].toLowerCase().indexOf(searchText.toLowerCase()) > -1 ) { // object value contains the user provided text. } else { // object didn't match a filter value so remove it from array via filter returnObjects = returnObjects.filter(obj => obj !== filterObjectEntery); } } else { console.log('Search key is not available in JSON object.'); } }) return returnObjects; } } 

Добавить в @NgModule «Добавить JsonFilterByPipe в свой список объявлений в вашем модуле; если вы забыли сделать это, вы получите сообщение об ошибке для jsonFilterBy . Если вы добавите модуль, он будет доступен для всех компонентов этого модуля.

 @NgModule({ imports: [ CommonModule, RouterModule, FormsModule, ReactiveFormsModule, ], providers: [ StudentDetailsService ], declarations: [ UsersComponent, UserComponent, JsonFilterByPipe, ], exports : [UsersComponent, UserComponent] }) export class UsersModule { // ... } 

Имя файла: users.component.ts и StudentDetailsService создается из этой ссылки .

 import { MyStudents } from './../../services/student/my-students'; import { Component, OnInit, OnDestroy } from '@angular/core'; import { StudentDetailsService } from '../../services/student/student-details.service'; @Component({ selector: 'app-users', templateUrl: './users.component.html', styleUrls: [ './users.component.css' ], providers:[StudentDetailsService] }) export class UsersComponent implements OnInit, OnDestroy { students: MyStudents[]; selectedStudent: MyStudents; constructor(private studentService: StudentDetailsService) { } ngOnInit(): void { this.loadAllUsers(); } ngOnDestroy(): void { // ONDestroy to prevent memory leaks } loadAllUsers(): void { this.studentService.getStudentsList().then(students => this.students = students); } onSelect(student: MyStudents): void { this.selectedStudent = student; } } 

Имя файла: users.component.html

 
 
 
 
 Filter by Name:  
 
 
Present are Students
 
 
  {{student.id}} {{student.name | uppercase}}