Apparentemente, Angular 2 utilizzerà le pipe anziché i filtri come in Angular1 insieme a ng-for per filtrare i risultati, sebbene l'implementazione sembra ancora vaga, senza una chiara documentazione.

Vale a dire ciò che sto cercando di ottenere potrebbe essere visto dalla seguente prospettiva

<div *ng-for="#item of itemsList" *ng-if="conditon(item)"></div>

Come implementare così usando i tubi?

Fondamentalmente, scrivi una pipe che puoi quindi usare nella *ngFordirettiva.

Nel tuo componente:

filterargs = {title: 'hello'};
items = [{title: 'hello world'}, {title: 'hello kitty'}, {title: 'foo bar'}];

Nel tuo modello, puoi passare una stringa, un numero o un oggetto alla tua pipe da utilizzare per filtrare su:

<li *ngFor="let item of items | myfilter:filterargs">

Nella tua pipa:

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

@Pipe({
    name: 'myfilter',
    pure: false
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], filter: Object): any {
        if (!items || !filter) {
            return items;
        }
        // filter items array, items which match and return true will be
        // kept, false will be filtered out
        return items.filter(item => item.title.indexOf(filter.title) !== -1);
    }
}

Ricorda di registrare la tua pipe app.module.ts; non è più necessario registrare i tubi nel proprio@Component

import { MyFilterPipe } from './shared/pipes/my-filter.pipe';

@NgModule({
    imports: [
        ..
    ],
    declarations: [
        MyFilterPipe,
    ],
    providers: [
        ..
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Ecco un Plunker che dimostra l'uso di un tubo filtro personalizzato e del tubo fetta incorporato per limitare i risultati.

Si prega di notare (come diversi commentatori hanno sottolineato) che c'è un motivo per cui non ci sono tubi del filtro integrati in Angolare.

Molti di voi hanno grandi approcci, ma l'obiettivo qui è essere generici e definire un array di array che è estremamente riutilizzabile in tutti i casi in relazione a * ngFor.

callback.pipe.ts (non dimenticare di aggiungere questo all'array di dichiarazioni del tuo modulo)

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

@Pipe({
    name: 'callback',
    pure: false
})
export class CallbackPipe implements PipeTransform {
    transform(items: any[], callback: (item: any) => boolean): any {
        if (!items || !callback) {
            return items;
        }
        return items.filter(item => callback(item));
    }
}

Quindi nel tuo componente, devi implementare un metodo con la seguente firma (item: any) => booleano , nel mio caso, ad esempio, l'ho chiamato filterUser, che filtra l'età degli utenti che è maggiore di 18 anni.

Il tuo componente

@Component({
  ....
})
export class UsersComponent {
  filterUser(user: IUser) {
    return !user.age >= 18
  }
}

E, ultimo ma non meno importante, il tuo codice html sarà simile al seguente:

Il tuo HTML

<li *ngFor="let user of users | callback: filterUser">{{user.name}}</li>

Come puoi vedere, questa pipe è abbastanza generica in tutti gli array come gli elementi che devono essere filtrati tramite un callback. In mycase, l'ho trovato molto utile per * ngPer scenari simili.

Spero che questo ti aiuti!!!

codematrix

Modo semplificato (utilizzato solo su array di piccole dimensioni a causa di problemi di prestazioni. Negli array di grandi dimensioni è necessario creare manualmente il filtro tramite codice):

Vedi: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

@Pipe({
    name: 'filter'
})
@Injectable()
export class FilterPipe implements PipeTransform {
    transform(items: any[], field : string, value : string): any[] {  
      if (!items) return [];
      if (!value || value.length == 0) return items;
      return items.filter(it => 
      it[field].toLowerCase().indexOf(value.toLowerCase()) !=-1);
    }
}

Uso:

<li *ngFor="let it of its | filter : 'name' : 'value or variable'">{{it}}</li>

Se usi una variabile come secondo argomento, non usare le virgolette.

Questo è quello che ho implementato senza usare pipe.

component.html

<div *ngFor="let item of filter(itemsList)">

component.ts

@Component({
....
})
export class YourComponent {
  filter(itemList: yourItemType[]): yourItemType[] {
    let result: yourItemType[] = [];
    //your filter logic here
    ...
    ...
    return result;
  }
}

Non sono sicuro di quando è arrivato, ma hanno già creato un tubo di taglio che lo farà. È anche ben documentato.

https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

<p *ngFor="let feature of content?.keyFeatures | slice:1:5">
   {{ feature.description }}
</p>

È inoltre possibile utilizzare quanto segue:

<template ngFor let-item [ngForOf]="itemsList">
    <div *ng-if="conditon(item)"></div>
</template>

Questo mostrerà il div solo se i tuoi articoli corrispondono alla condizione

Vedere la documentazione angolare per ulteriori informazioni Se si necessita anche dell'indice, utilizzare quanto segue:

<template ngFor let-item [ngForOf]="itemsList" let-i="index">
    <div *ng-if="conditon(item, i)"></div>
</template>

le pipe in Angular2 sono simili alle pipe sulla riga di comando. L'output di ciascun valore precedente viene immesso nel filtro dopo il tubo, il che semplifica la catena di filtri in questo modo:

<template *ngFor="#item of itemsList">
    <div *ngIf="conditon(item)">{item | filter1 | filter2}</div>
</template>

Per questo requisito, implemento e pubblico un componente generico . Vedere

https://www.npmjs.com/package/w-ng5

Per utilizzare questi componenti, prima di installare questo pacchetto con npm:

npm install w-ng5 --save

Successivamente, importa il modulo in app.module

...
import { PipesModule } from 'w-ng5';

Nel passaggio successivo, aggiungi nella sezione dichiarare il modulo app:

imports: [
  PipesModule,
  ...
]

Esempio di utilizzo

Filtraggio di una stringa semplice

<input type="text"  [(ngModel)]="filtroString">
<ul>
  <li *ngFor="let s of getStrings() | filter:filtroString">
    {{s}}
  </li>
</ul>

Filtraggio di stringhe complesse - campo "Valore" nel livello 2

<input type="text"  [(ngModel)]="search">
<ul>
  <li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.valor2', value: search}]">
    {{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
  </li>
</ul>

Filtraggio di stringhe complesse - campo intermedio - "Valore" nel livello 1

<input type="text"  [(ngModel)]="search3">
<ul>
  <li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.valor1', value: search3}]">
    {{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
  </li>
</ul>

Filtraggio di array complessi semplici - campo "Nome" livello 0

<input type="text"  [(ngModel)]="search2">
<ul>
  <li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'nome', value: search2}]">
    {{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
  </li>
</ul>

Filtro nei campi dell'albero: campo "Valore" nel livello 2 o "Valore" nel livello 1 o "Nome" nel livello 0

<input type="text"  [(ngModel)]="search5">
<ul>
  <li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.valor2', value: search5}, {field:'n1.valor1', value: search5}, {field:'nome', value: search5}]">
    {{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
  </li>
</ul>

Filtraggio campo inesistente - "Valore" in livello inesistente 3

<input type="text"  [(ngModel)]="search4">
<ul>
  <li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.n3.valor3', value: search4}]">
    {{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
  </li>
</ul>

Questo componente funziona con un livello di attributo infinito ...

Una soluzione semplice che funziona con Angular 6 per filtrare un ngPer, è la seguente:

<span *ngFor="item of itemsList"  >
  <div *ngIf="yourCondition(item)">
    
    your code
    
  </div>
</span

Gli span sono utili perché non rappresentano intrinsecamente nulla.

So che è una vecchia domanda, tuttavia, ho pensato che potesse essere utile offrire un'altra soluzione.

equivalente di AngularJS di questo

<div *ng-for="#item of itemsList" *ng-if="conditon(item)"></div>

in Angular 2+ non puoi usare * ngFor e * ngIf su uno stesso elemento, quindi sarà il seguente:

<div *ngFor="let item of itemsList">
     <div *ngIf="conditon(item)">
     </div>
</div>

e se non puoi usare come contenitore interno usa invece ng-container. ng-container è utile quando si desidera aggiungere condizionalmente un gruppo di elementi (ovvero utilizzando * ngIf = "pippo") nella propria applicazione ma non si desidera avvolgerli con un altro elemento.

Ho creato un plunker basato sulle risposte qui e altrove.

Inoltre ho dovuto aggiungere una @Input, @ViewChilde ElementRefdi <input>creare esubscribe() ad un osservabile di esso.

Filtro di ricerca Angular2: PLUNKR (AGGIORNAMENTO: il plunker non funziona più)

Pipe sarebbe l'approccio migliore. ma sotto uno funzionerebbe anche.

<div *ng-for="#item of itemsList">
  <ng-container *ng-if="conditon(item)">
    // my code
  </ng-container>
</div>

Questo è il mio codice:

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

@Pipe({
    name: 'filter'
})
@Injectable()
export class FilterPipe implements PipeTransform {
    transform(items: any[], field : string, value): any[] {
      if (!items) return [];
      if (!value || value.length === 0) return items;
      return items.filter(it =>
      it[field] === value);
    }
}

Campione:

LIST = [{id:1,name:'abc'},{id:2,name:'cba'}];
FilterValue = 1;

<span *ngFor="let listItem of LIST | filter : 'id' : FilterValue">
                              {{listItem .name}}
                          </span>

Un altro approccio che mi piace utilizzare per i filtri specifici dell'applicazione è quello di utilizzare una proprietà di sola lettura personalizzata sul componente che consente di incapsulare la logica di filtro in modo più pulito rispetto all'utilizzo di una pipe personalizzata (IMHO).

Ad esempio, se voglio collegarmi albumListe filtrare su searchText:

searchText: "";
albumList: Album[] = [];

get filteredAlbumList() {
    if (this.config.searchText && this.config.searchText.length > 1) {
      var lsearchText = this.config.searchText.toLowerCase();
      return this.albumList.filter((a) =>
        a.Title.toLowerCase().includes(lsearchText) ||
        a.Artist.ArtistName.toLowerCase().includes(lsearchText)
      );
    }
    return this.albumList;
}

Per associare l'HTML è quindi possibile associare alla proprietà di sola lettura:

<a class="list-group-item"
       *ngFor="let album of filteredAlbumList">
</a>

Trovo che per i filtri specializzati specifici per l'applicazione funzioni meglio di una pipe in quanto mantiene la logica correlata al filtro con il componente.

I tubi funzionano meglio per i filtri riutilizzabili a livello globale.

Ho creato la seguente pipe per ottenere gli elementi desiderati da un elenco.

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(items: any[], filter: string): any {
    if(!items || !filter) {
      return items;
    }
    // To search values only of "name" variable of your object(item)
    //return items.filter(item => item.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1);

    // To search in values of every variable of your object(item)
    return items.filter(item => JSON.stringify(item).toLowerCase().indexOf(filter.toLowerCase()) !== -1);
  }

}

La conversione minuscola è solo per abbinare in modo insensibile al maiuscolo / minuscolo. Puoi usarlo a tuo avviso in questo modo: -

<div>
  <input type="text" placeholder="Search reward" [(ngModel)]="searchTerm">
</div>
<div>
  <ul>
    <li *ngFor="let reward of rewardList | filter:searchTerm">
      <div>
        <img [src]="reward.imageUrl"/>
        <p>{{reward.name}}</p>
      </div>
    </li>
  </ul>
</div>

Idealmente dovresti creare angualr 2 pipe per questo. Ma puoi fare questo trucco.

<ng-container *ngFor="item in itemsList">
    <div*ngIf="conditon(item)">{{item}}</div>
</ng-container>

Sulla base dell'elegante soluzione di callback pipe proposta sopra, è possibile generalizzarla un po 'di più consentendo il passaggio di parametri di filtro aggiuntivi. Abbiamo quindi:

callback.pipe.ts

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

@Pipe({
  name: 'callback',
  pure: false
})
export class CallbackPipe implements PipeTransform {
  transform(items: any[], callback: (item: any, callbackArgs?: any[]) => boolean, callbackArgs?: any[]): any {
    if (!items || !callback) {
      return items;
    }
    return items.filter(item => callback(item, callbackArgs));
  }
}

componente

filterSomething(something: Something, filterArgs: any[]) {
  const firstArg = filterArgs[0];
  const secondArg = filterArgs[1];
  ...
  return <some condition based on something, firstArg, secondArg, etc.>;
}

html

<li *ngFor="let s of somethings | callback : filterSomething : [<whatWillBecomeFirstArg>, <whatWillBecomeSecondArg>, ...]">
  {{s.aProperty}}
</li>

Ecco un esempio che ho creato qualche tempo fa e di cui ho scritto un blog, che include un disco funzionante. Fornisce una pipe di filtro in grado di filtrare qualsiasi elenco di oggetti. Fondamentalmente devi solo specificare la proprietà e il valore {chiave: valore} nella tua specifica ngFor.

Non è molto diverso dalla risposta di @ NateMay, tranne per il fatto che lo spiego in dettaglio relativamente dettagliato.

Nel mio caso, ho filtrato un elenco non ordinato su del testo (filterText) che l'utente ha inserito rispetto alla proprietà "label" degli oggetti nel mio array con questo tipo di mark-up:

<ul>
  <li *ngFor="let item of _items | filter:{label: filterText}">{{ item.label }}</li>
</ul>

https://long2know.com/2016/11/angular2-filter-pipes/

Il primo passaggio che si crea Filtro utilizzando @Pipe nel tuo file component.ts:

your.component.ts

import { Component, Pipe, PipeTransform, Injectable } from '@angular/core';
import { Person} from "yourPath";

@Pipe({
  name: 'searchfilter'
})
@Injectable()
export class SearchFilterPipe implements PipeTransform {
  transform(items: Person[], value: string): any[] {
    if (!items || !value) {
      return items;
    }
    console.log("your search token = "+value);
    return items.filter(e => e.firstName.toLowerCase().includes(value.toLocaleLowerCase()));
  }
}
@Component({
  ....
    persons;

    ngOnInit() {
         //inicial persons arrays
    }
})

E struttura dei dati dell'oggetto Person:

person.ts

export class Person{
    constructor(
        public firstName: string,
        public lastName: string
    ) { }
}

A tuo avviso nel file html:

your.component.html

    <input class="form-control" placeholder="Search" id="search" type="text" [(ngModel)]="searchText"/>
    <table class="table table-striped table-hover">
      <colgroup>
        <col span="1" style="width: 50%;">
        <col span="1" style="width: 50%;">
      </colgroup>
      <thead>
        <tr>
          <th>First name</th>
          <th>Last name</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let person of persons | searchfilter:searchText">
          <td>{{person.firstName}}</td>
          <td>{{person.lastName}}</td>
        </tr>
      </tbody>
    </table>

Questo è il tuo array

products: any = [
        {
            "name": "John-Cena",
                    },
        {
            "name": "Brock-Lensar",

        }
    ];

Questo è il tuo ngFor loop Filtra per:

<input type="text" [(ngModel)]='filterText' />
    <ul *ngFor='let product of filterProduct'>
      <li>{{product.name }}</li>
    </ul>

Lì sto usando filterProduct instant of products, perché voglio preservare i miei dati originali. Qui il modello _filterText viene utilizzato come casella di input. Ogni volta che si verifica una funzione di impostazione del setter, viene chiamato. In setFilterText performProduct viene chiamato restituirà il risultato solo quelli che corrispondono all'input. Sto usando lettere minuscole per maiuscole e minuscole.

filterProduct = this.products;
_filterText : string;
    get filterText() : string {
        return this._filterText;
    }

    set filterText(value : string) {
        this._filterText = value;
        this.filterProduct = this._filterText ? this.performProduct(this._filterText) : this.products;

    } 

    performProduct(value : string ) : any {
            value = value.toLocaleLowerCase();
            return this.products.filter(( products : any ) => 
                products.name.toLocaleLowerCase().indexOf(value) !== -1);
        }

Dopo aver cercato su Google, mi sono imbattuto in ng2-search-filter. In prenderà il tuo oggetto e applicherà il termine di ricerca a tutte le proprietà dell'oggetto in cerca di una corrispondenza.

Stavo trovando qualcosa per fare un filtro passando un oggetto, quindi posso usarlo come multi-filtro:

ho fatto questa soluzione di bellezza:

filter.pipe.ts

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

@Pipe({
  name: 'filterx',
  pure: false
})
export class FilterPipe implements PipeTransform {
 transform(items: any, filter: any, isAnd: boolean): any {
  let filterx=JSON.parse(JSON.stringify(filter));
  for (var prop in filterx) {
    if (Object.prototype.hasOwnProperty.call(filterx, prop)) {
       if(filterx[prop]=='')
       {
         delete filterx[prop];
       }
    }
 }
if (!items || !filterx) {
  return items;
}

return items.filter(function(obj) {
  return Object.keys(filterx).every(function(c) {
    return obj[c].toLowerCase().indexOf(filterx[c].toLowerCase()) !== -1
  });
  });
  }
}

component.ts

slotFilter:any={start:'',practitionerCodeDisplay:'',practitionerName:''};

componet.html

             <tr>
                <th class="text-center">  <input type="text" [(ngModel)]="slotFilter.start"></th>
                <th class="text-center"><input type="text" [(ngModel)]="slotFilter.practitionerCodeDisplay"></th>
                <th class="text-left"><input type="text" [(ngModel)]="slotFilter.practitionerName"></th>
                <th></th>
              </tr>


 <tbody *ngFor="let item of practionerRoleList | filterx: slotFilter">...