Angulaire 2 filtre/de la liste de recherche

Vous avez manuellement le filtre de résultat basé sur le changement de l'entrée à chaque fois par le maintien de l'auditeur sur input événement. Tout en faisant manuellement filtrage assurez-vous de vous tenir à deux copie de variable, on serait original de la collection de copie & deuxième serait filteredCollection copie. L'avantage pour aller de cette façon pourrait sauver votre couple de la inutile de filtrage sur la détection de changement de cycle. Vous pouvez voir plus de code, mais ce serait plus de performance amical.

Balisage HTML Modèle

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

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

Noter que cette.itemsCopy est égal à cette.les éléments et doivent être réglés avant de faire de la recherche.

données

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

Vous pouvez atteindre cet objectif par la création d'une simple pipe

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

Pipe

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 va filtrer le résultat basé sur le terme de recherche

Plus D'Infos

Pipes Angulaire 2+ sont un excellent moyen de transformer et de format de données directement à partir de vos modèles.

Tuyaux de nous permettre de modifier les données à l'intérieur d'un modèle; c'est à dire le filtrage, la commande, le formatage des dates, des nombres, des devises, etc. Un bref exemple vous pouvez transférer une chaîne de caractères en minuscules, en appliquant un filtre simple dans le code du modèle.

Liste de Tuyaux de Liste des API ^Exemples

{{ user.name | uppercase }}

Exemple Angulaire version 4.4.7. ng version

Personnalisé Tuyaux qui accepte plusieurs arguments.

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

De filtrage du contenu à l'aide d'une Pipe « 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;
}
}

Ajouter à @NgModule « Ajouter JsonFilterByPipe à votre liste de déclarations dans votre module; si vous oubliez de le faire, vous recevrez un message d'erreur pas de fournisseur pour jsonFilterBy. Si vous ajoutez le module puis il est disponible pour tous les composants de ce module.

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

Nom de fichier: users.component.ts et StudentDetailsService est créé à partir de ce lien.

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

Nom De Fichier: users.component.html

<div>
<br />
<div class="form-group">
<div class="col-md-6" >
Filter by Name: 
<input type="text" [(ngModel)]="searchText" 
class="form-control" placeholder="Search By Category" />
</div>
</div>
<h2>Present are Students</h2>
<ul class="students">
<li *ngFor="let student of students | jsonFilterBy:[searchText, 'name'] " >
<a *ngIf="student" routerLink="/users/update/{{student.id}}">
<span class="badge">{{student.id}}</span> {{student.name | uppercase}}
</a>
</li>
</ul>
</div>

Ce code presque fonctionné pour moi...mais je voulais un multiple de l'élément de filtre de sorte que mes mods pour le filtre de tuyau sont ci-dessous:

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

Maintenant, au lieu de

jsonFilterBy:[ searchText, 'name']

vous pouvez faire

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