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

Question

Я ищу угловой 2 способ сделать this.

У меня просто есть список элементов, и я хочу сделать входную работу whos, чтобы отфильтровать список.

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

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

Каков реальный способ сделать это в Угловом 2? Это требует трубы?

Answer 1

Вы должны вручную фильтровать результат, основанный на изменении ввода, каждый раз, сохраняя при этом слушателя над событием 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 2

Вы также можете создать search pipe фильтровать результаты:

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> 

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

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

More Info

Answer 5

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

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

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

Markup:

<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 6

В угловом 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<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.Nothing специальными в этом коде просто инициализировать наши записи переменной со списком категорий, две других переменным isDesc и столбец объявляется, которые мы будем использовать для сортировки последних. В конце добавлено this.sort (this.column); последнее мы будем использовать, как только у нас будет этот метод.

Note templateUrl: './category.component.html', который мы создадим рядом, чтобы показать записи в формате tabluar.

Для этого создать HTML-страницу с именем category.component.html, Whith следующий код:

3.Here мы используем 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.Here в трансформации методы мы принимающий список категорий и поиск текста для поиска записи/фильтра в списке. Импорт этого файла в наш файл category.component.ts, мы хотим использовать его здесь, следующим образом:

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

7.Our ngFor петля теперь нужно, чтобы наши трубы для фильтрации записей поэтому изменить его this.You можно увидеть результат в изображении ниже

enter image description here