Anscheinend wird Angular 2 Pipes anstelle von Filtern wie in Angular1 in Verbindung mit ng-for verwenden, um Ergebnisse zu filtern, obwohl die Implementierung noch vage zu sein scheint, ohne klare Dokumentation.

Was ich erreichen möchte, kann nämlich aus der folgenden Perspektive betrachtet werden

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

Wie implementiere ich das mit Rohren?

Grundsätzlich schreiben Sie eine Pipe, die Sie dann in der *ngForDirektive verwenden können.

In Ihrer Komponente:

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

In Ihrer Vorlage können Sie eine Zeichenfolge, eine Nummer oder ein Objekt an Ihre Pipe übergeben, um nach folgenden Elementen zu filtern:

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

In deiner Pfeife:

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

Denken Sie daran, Ihre Pipe zu registrieren app.module.ts. Sie müssen die Rohre nicht mehr in Ihrem registrieren@Component

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

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

Hier ist ein Plunker, der die Verwendung eines benutzerdefinierten Filterrohrs und des integrierten Slice-Rohrs demonstriert , um die Ergebnisse zu begrenzen.

Bitte beachten Sie (wie mehrere Kommentatoren hervorgehoben haben), dass es einen Grund gibt, warum es in Angular keine eingebauten Filterrohre gibt.

Viele von Ihnen haben großartige Ansätze, aber das Ziel hier ist es, generisch zu sein und eine Array-Pipe zu definieren, die in Bezug auf * ngFor in allen Fällen extrem wiederverwendbar ist.

callback.pipe.ts (vergessen Sie nicht, dies dem Deklarationsarray Ihres Moduls hinzuzufügen)

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

Dann müssen Sie in Ihrer Komponente eine Methode mit der folgenden Signatur (item: any) => boolean implementieren. In meinem Fall habe ich sie beispielsweise filterUser genannt, um das Alter der Benutzer zu filtern, die größer als 18 Jahre sind.

Ihre Komponente

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

Und zu guter Letzt sieht Ihr HTML-Code folgendermaßen aus:

Ihr HTML

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

Wie Sie sehen können, ist diese Pipe für alle Array-ähnlichen Elemente, die über einen Rückruf gefiltert werden müssen, ziemlich allgemein. In meinem Fall fand ich es sehr nützlich für * ngFür ähnliche Szenarien.

Hoffe das hilft!!!

Codematrix

Vereinfachte Methode (Wird aufgrund von Leistungsproblemen nur bei kleinen Arrays verwendet. Bei großen Arrays muss der Filter manuell per Code erstellt werden):

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

Verwendungszweck:

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

Wenn Sie eine Variable als zweites Argument verwenden, verwenden Sie keine Anführungszeichen.

Dies ist, was ich ohne Verwendung von Pipe implementiert habe.

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

Ich bin mir nicht sicher, wann es reinkam, aber sie haben bereits Slice Pipe gemacht, das das macht. Es ist auch gut dokumentiert.

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>

Sie können auch Folgendes verwenden:

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

Dies zeigt nur die Div an, wenn Ihre Artikel der Bedingung entsprechen

Siehe die Winkel Dokumentation für weitere Informationen Wenn Sie auch den Index benötigen würde, verwenden Sie die folgenden Schritte aus :

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

Pipes in Angular2 ähneln Pipes in der Befehlszeile. Die Ausgabe jedes vorhergehenden Werts wird nach dem Rohr in den Filter eingespeist, wodurch es einfach ist, Filter wie folgt zu verketten:

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

Für diese Anforderung implementiere und veröffentliche ich eine generische Komponente . Sehen

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

Um diese Komponenten zu verwenden, installieren Sie dieses Paket zuvor mit npm:

npm install w-ng5 --save

Importieren Sie anschließend das Modul in app.module

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

Fügen Sie im nächsten Schritt den Deklarationsabschnitt von app.module hinzu:

imports: [
  PipesModule,
  ...
]

Verwendung der Probe

Einfache Zeichenfolge filtern

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

Filterung komplexer Zeichenfolgen - Feld 'Wert' in Ebene 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>

Filterung komplexer Zeichenfolgen - mittleres Feld - 'Wert' in Ebene 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>

Einfaches Filtern komplexer Arrays - Feld 'Nome' Level 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>

Filtern in Baumfeldern - Feld 'Tapferkeit' in Stufe 2 oder 'Tapferkeit' in Stufe 1 oder 'Nome' in Stufe 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>

Nicht vorhandenes Feld filtern - 'Tapferkeit' in nicht vorhandenem Level 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>

Diese Komponente arbeitet mit einer unendlichen Attributebene ...

Eine einfache Lösung, die mit Angular 6 zum Filtern eines ngFor zusammenarbeitet, ist die folgende:

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

Spannweiten sind nützlich, da sie von Natur aus nichts darstellen.

Ich weiß, dass es eine alte Frage ist, aber ich dachte, es könnte hilfreich sein, eine andere Lösung anzubieten.

Äquivalent von AngularJS davon

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

In Angular 2+ können Sie * ngFor und * ngIf nicht für dasselbe Element verwenden.

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

und wenn Sie nicht als internen Container verwenden können, verwenden Sie stattdessen ng-container. ng-container ist nützlich, wenn Sie eine Gruppe von Elementen (dh mit * ngIf = "foo") in Ihrer Anwendung bedingt anhängen möchten, diese aber nicht mit einem anderen Element umschließen möchten.

Ich habe einen Plunker erstellt, der auf den Antworten hier und anderswo basiert.

Zusätzlich musste ich ein @Input, @ViewChildund ElementRefvon <input>und erstellen und subscribe()ein beobachtbares davon erstellen .

Angular2-Suchfilter: PLUNKR (UPDATE: Plunker funktioniert nicht mehr)

Rohr wäre der beste Ansatz. aber unten würde man auch funktionieren.

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

Das ist mein Code:

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

Stichprobe:

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

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

Ein anderer Ansatz, den ich gerne für anwendungsspezifische Filter verwende, ist die Verwendung einer benutzerdefinierten schreibgeschützten Eigenschaft für Ihre Komponente, mit der Sie die Filterlogik sauberer kapseln können als mit einer benutzerdefinierten Pipe (IMHO).

Zum Beispiel, wenn ich binden albumListund filtern möchte 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;
}

Um im HTML zu binden, können Sie dann an die schreibgeschützte Eigenschaft binden:

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

Ich finde, dass für spezielle Filter, die anwendungsspezifisch sind, dies besser funktioniert als eine Pipe, da die Logik in Bezug auf den Filter mit der Komponente beibehalten wird.

Rohre funktionieren besser für global wiederverwendbare Filter.

Ich habe die folgende Pipe erstellt, um die gewünschten Elemente aus einer Liste abzurufen.

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

}

Die Konvertierung in Kleinbuchstaben entspricht nur der Groß- und Kleinschreibung. Sie können es in Ihrer Ansicht folgendermaßen verwenden: -

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

Idealerweise sollten Sie dafür ein Angualr 2-Rohr erstellen. Aber du kannst diesen Trick machen.

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

Basierend auf der oben vorgeschlagenen sehr eleganten Callback-Pipe-Lösung ist es möglich, sie etwas weiter zu verallgemeinern, indem zusätzliche Filterparameter weitergegeben werden. Wir haben dann:

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

Komponente

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>

Hier ist ein Beispiel, das ich vor einiger Zeit erstellt und über das ich gebloggt habe und das einen funktionierenden Plunk enthält. Es bietet eine Filterpipe, mit der jede Liste von Objekten gefiltert werden kann. Sie geben im Grunde nur die Eigenschaft und den Wert {key: value} in Ihrer ngFor-Spezifikation an.

Es unterscheidet sich nicht wesentlich von der Antwort von @ NateMay, außer dass ich es relativ ausführlich erkläre.

In meinem Fall habe ich eine ungeordnete Liste nach Text (filterText) gefiltert, den der Benutzer mit dieser Art von Markup gegen die Eigenschaft "label" der Objekte in meinem Array eingegeben hat:

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

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

Der erste Schritt, den Sie mit Filter @Pipein Ihrer Datei component.ts erstellen:

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

Und Datenstruktur des Personenobjekts:

person.ts

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

Aus Ihrer Sicht in einer HTML-Datei:

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>

Dies ist Ihr Array

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

        }
    ];

Dies ist Ihre ngFor-Schleife. Filtern nach:

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

Dort verwende ich filterProduct Instant of Products, weil ich meine Originaldaten beibehalten möchte. Hier wird das Modell _filterText als Eingabefeld verwendet. Wann immer es eine Änderung gibt, wird die Setter-Funktion aufgerufen. In setFilterText wird performProduct aufgerufen, und es wird nur das Ergebnis zurückgegeben, das mit der Eingabe übereinstimmt. Ich verwende Kleinbuchstaben für Groß- und Kleinschreibung.

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

Nach einigem googeln bin ich rübergekommen ng2-search-filter. In nimmt Ihr Objekt und wendet den Suchbegriff auf alle Objekteigenschaften an, die nach einer Übereinstimmung suchen.

Ich habe etwas gefunden, um einen Filter zu erstellen, der ein Objekt passiert, dann kann ich ihn wie einen Mehrfachfilter verwenden:

Ich habe diese Beauty-Lösung gemacht:

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

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