Liste de filtres/recherche en Angular 2

Question

Je cherche la façon angulaire 2 pour faire ce .

J'ai simplement une liste d'éléments, et je veux créer une entrée dont le rôle est de filtrer la liste.

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

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

Quelle est la façon de procéder dans Angular 2 ? Cela nécessite-t-il un tuyau ?

Answer 1

Recherche par plusieurs champs

Supposition de données :

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>

Pipe :

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

  }
}

Une ligne pour tout !

Answer 2

Vous devez filtrer manuellement le résultat en fonction du changement de l'entrée à chaque fois en gardant l'écouteur sur input événement. Lorsque vous effectuez un filtrage manuel, assurez-vous de maintenir deux copies de la variable, l'une étant la copie originale de la collection et la seconde étant la copie de l'événement. filteredCollection copie. L'avantage de cette méthode est qu'elle permet d'éviter quelques filtrages inutiles lors du cycle de détection des changements. Vous verrez peut-être un peu plus de code, mais cette méthode est plus performante.

Markup - Modèle HTML

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

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

Code

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>

Composant

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

Notez que this.itemsCopy est égal à ce.articles et doit être défini avant d'effectuer la recherche.

Answer 4

Données

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

Vous pouvez y parvenir en créant un simple tube

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

Tuyau

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

Cela permettra de filtrer les résultats en fonction du terme recherché.

Plus d'informations

Answer 5

Dans Angular 2, nous n'avons pas de filtre prédéfini et de commande par comme c'était le cas avec AngularJs, nous devons les créer pour nos besoins. C'est une perte de temps mais nous devons le faire, (voir No FilterPipe ou OrderByPipe). Dans cet article, nous allons voir comment nous pouvons créer un filtre appelé pipe dans Angular 2 et une fonction de tri appelée Order By. Utilisons un simple tableau de données json factice pour cela. Voici le json que nous allons utiliser pour notre exemple

Nous allons d'abord voir comment utiliser le tuyau (filtre) en utilisant la fonction de recherche :

Créer un composant avec le nom 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>

Rien de spécial dans ce code, il suffit d'initialiser notre variable records avec une liste de catégories, deux autres variables isDesc et column sont déclarées, que nous utiliserons pour le tri. A la fin, nous ajoutons this.sort(this.column) ; nous utiliserons cette dernière, une fois que nous aurons cette méthode.

Notez le templateUrl : './category.component.html', que nous allons créer ensuite pour afficher les enregistrements sous forme de tableaux.

Pour cela, créez une page HTML appelée category.component.html, avec le code suivant :

Ici nous utilisons ngFor pour répéter les enregistrements et les montrer ligne par ligne, essayez de l'exécuter et nous pouvons voir tous les enregistrements dans un tableau.

Recherche - Filtrer les enregistrements

Disons que nous voulons rechercher le tableau par nom de catégorie, pour cela ajoutons une zone de texte pour taper et rechercher

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

Maintenant, nous devons créer un tuyau pour rechercher le résultat par catégorie parce que le filtre n'est pas disponible comme il l'était dans angularjs plus.

Créez un fichier category.pipe.ts et ajoutez-y le code suivant.

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

Ici, dans la méthode de transformation, nous acceptons la liste des catégories et le texte de recherche pour rechercher/filtrer les enregistrements de la liste. Importez ce fichier dans notre fichier category.component.ts, nous voulons l'utiliser ici, comme suit :

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

Notre boucle ngFor a maintenant besoin d'avoir notre Pipe pour filtrer les enregistrements, donc changez-le en ceci : vous pouvez voir le résultat dans l'image ci-dessous.

Entrez la description de l'image ici