liste de filtres avec valeur dynamique angulaire 2

Je suis créer une liste avec en angulaire 2 et que vous souhaitez filtrer les données lorsque je mets de la valeur dans le texte d'entrée, mais mon code ne fonctionne pas.J'utilise des tuyaux pour le filtrer.S'il vous plaît dire ce que je fais mal .liste de filtres avec valeur dynamique angulaire 2

html

<input type="text" class="form-control" #listFilter/> 
<ul *ngFor="let data of dataList|filter:{name:listFilter}">

filtres tuyaux

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

@Pipe({ 
    name: "filter", 
    pure: false 
}) 
export class ArrayFilterPipe implements PipeTransform { 
    transform(items: Array<any>, conditions: {[field: string]: any}): Array<any> { 
    return items.filter(item => { 
     for (let field in conditions) { 
     if (item[field] !== conditions[field]) { 
      return false; 
     } 
     } 
     return true; 
    }); 
    } 
}

de liste de réseau qui filtre par texte d'entrée

[ 
    { 
     id:1 , 
     name: "ABC", 
    },{ 
     id:2 , 
     name: "XYZ", 
    },{ 
     id:3 , 
     name: "AQW", 
    },{ 
     id:4 , 
     name: "ASD", 
    },{ 
     id:5 , 
     name: "BVC", 
    } 
    ];

J'utilise actuellement angulaire 2.0.0

Source

2016-11-13 user6751153

Fournir un plunker ou jsFiddle - alors il est beaucoup plus facile de vous aider. –

Ok Tout d'abord, ne jamais utiliser des tuyaux d'utilisateur pour filtrer ou commander n'importe quel tableau ou d'autres objets que vous avez. Si vous êtes du Brésil juste regarder cette classe:

https://www.youtube.com/watch?v=h1t_O_w0LOc&list=PLGxZ4Rq3BOBoSRcKWEdQACbUCNWLczg2G&index=49

Cette fille explique pourquoi vous ne devriez jamais filtrer ou commander quoi que ce soit avec des tuyaux. Ok maintenant créons l'entrée correcte avec saisie semi-automatique et en même temps filtrons la valeur d'entrée de l'utilisateur.

Dans cet exemple, l'utilisateur recherchera un livre de notre collection de livres.

Ceci est le composant:

import { Component, OnInit } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { Observable } from 'rxjs/Rx'; 

@Component({ 
    selector: 'app-filter-examples', 
    templateUrl: './filter-examples.component.html', 
    styleUrls: ['./filter-examples.component.css'] 
}) 

export class FilterExamplesComponent implements OnInit { 

    books: string[] = ['Angular JS', 'Angular 2', 'JavaScript', 'HTML 5 and CSS 3', 
    'Java 1', 'Java 2', 'Java 3', 'php', 'Typescript', 'C', 'c++', 
    'C#']; 
    filtro: string = ''; 

    getBooks() { 

     // if the input is empty search result will show 0 books. 
     //This is just to not show all books before user do any search 
     if (this.filtro === '') { 
      return null; 
     } 



     if (this.books.length === 0 || this.filtro === undefined) { 
      return this.books; 
     } 

     // Here where we will do the search. First of all filtro(filter in portuguese) 
     // will be compare to all elements in our books (all of then in lower case) 
     // and will return all the elements that match with the variable filtro 
     return this.books.filter((v) => { 
      if (v.toLowerCase().indexOf(this.filtro.toLowerCase()) >= 0) { 
       return true; 
      } 
      return false; 
     }); 
    } 
}

Maintenant, c'est notre fichier html:

<html> 
    <body> 

    Search some Book <br> 
    <input list="testAutocomplete" [(ngModel)]="filtro" > 
     <datalist id="testAutocomplete"> 
     <option *ngFor="let book of books"> 
      {{ book }} 
     </option>  
     </datalist> 


    <h1> Search Result </h1> 
    <ul> 
     <li *ngFor="let book of getBooks()"> 
     {{ book }} 
     </li> 
    </ul> 
</body> 
</html>

La meilleure façon de faire une simple recherche avec saisie semi-automatique dans angulaire 2 est d'utiliser datalist tag et ngFor à Lister les options C'est vraiment simple. Et n'oubliez pas le ngModel comme attribut d'entrée pour utiliser cette valeur dans nos méthodes dans le composant. OBS: la méthode getBooks est seulement d'afficher le résultat à l'utilisateur dans une liste dynamique.

Source

2017-03-09 02:10:57

Pour ceux d'entre nous qui ne sont pas du Brésil, pourriez-vous également nous expliquer pourquoi nous ne devrions pas utiliser de tuyaux? Merci. – sabzeta

Je n'ai pas expliqué parce que je ne comprenais pas pourquoi vous ne devriez pas utiliser de tuyaux. Je pense que c'est quelque chose lié à la performance. @sabzeta –

Votre filtre-pipes est bon, aucun changement nécessaire là. Regardez seulement si "field" obtient la valeur correcte.

voici un exemple:

HTML:

<tr class="row" *ngFor="let pipline of piplines | datafilter: 
{Status:searchText}">

controller.ts

filterResult(searchText):void 
    { 
    this.searchText= searchText; 
    console.log("filterResult:" + this.searchText); 
    }

Source

2017-10-17 18:57:26

liste de filtres avec valeur dynamique angulaire 2

Répondre

Questions connexes