Görünüşe göre Angular 2, sonuçları filtrelemek için ng-for ile birlikte Angular1'deki gibi filtreler yerine boruları kullanacak, ancak uygulama hala açık bir belge olmaksızın, belirsiz görünüyor.

Yani elde etmeye çalıştığım şey aşağıdaki perspektiften görülebilir

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

Boruları kullanarak nasıl uygulanır?

Temel olarak, daha sonra *ngFordirektifte kullanabileceğiniz bir boru yazarsınız .

Bileşeninizde:

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

Şablonunuzda, filtrelemek için kullanmak üzere dize, sayı veya nesneyi borunuza iletebilirsiniz:

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

Borunuzda:

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

Borunuzu kaydetmeyi unutmayın app.module.ts; boruları artık@Component

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

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

Sonuçları sınırlamak için özel bir filtre borusu ve dahili dilim borusu kullanımını gösteren bir Plunker .

Lütfen (birkaç yorumcunun işaret ettiği gibi) Angular'da yerleşik filtre borularının olmamasının bir nedeni olduğunu unutmayın.

Birçoğunuzun harika yaklaşımları var, ancak buradaki amaç genel olmak ve * ngFor ile ilgili tüm durumlarda son derece yeniden kullanılabilir bir dizi borusu tanımlamaktır.

callback.pipe.ts (bunu modülünüzün bildirim dizisine eklemeyi unutmayın)

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

Ardından, bileşeninizde, aşağıdaki imzalı bir yöntem uygulamanız gerekir (item: any) => boolean , örneğin benim durumumda, 18 yaşından büyük kullanıcıların yaşlarını filtreleyen filterUser olarak adlandırdım.

Bileşeniniz

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

Son olarak, html kodunuz şöyle görünecektir:

HTML'niz

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

Gördüğünüz gibi, bu Boru, geri arama yoluyla filtrelenmesi gereken öğeler gibi tüm dizi için oldukça geneldir. Mycase'de, benzer senaryolar için * çok yararlı buldum.

Bu yardımcı olur umarım!!!

codematrix

Basitleştirilmiş yol (Performans sorunları nedeniyle yalnızca küçük dizilerde kullanılır. Büyük dizilerde filtreyi kodla manuel olarak yapmanız gerekir):

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

Kullanımı:

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

Bir değişkeni ikinci bir bağımsız değişken olarak kullanırsanız, tırnak işareti kullanmayın.

Boru kullanmadan uyguladım.

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

Ne zaman geldiğinden emin değilim ama bunu yapacak dilim borusu zaten yaptılar. Çok iyi belgelenmiş.

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>

Aşağıdakileri de kullanabilirsiniz:

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

Bu yalnızca div öğeleriniz koşulla eşleştiğinde div değerini gösterir

Daha fazla bilgi için açısal belgelere bakın. Dizine de ihtiyacınız varsa, aşağıdakileri kullanın:

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

Açısal2'deki borular komut satırındaki borulara benzer. Önceki her değerin çıkışı, borudan sonra filtreye beslenir ve bu da filtrelerin zincirlenmesini kolaylaştırır:

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

Bu gereklilik için, genel bir bileşen uyguluyorum ve yayınlıyorum . Görmek

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

Bu bileşenleri kullanmak için, daha önce bu paketi npm ile yükleyin:

npm install w-ng5 --save

Ardından, app.module modülünü içe aktarın

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

Bir sonraki adımda, app.module'un declare bölümüne ekleyin:

imports: [
  PipesModule,
  ...
]

Örnek kullanım

Basit dizeyi filtreleme

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

Karmaşık dizeyi filtreleme - 2. düzeydeki 'Değer' alanı

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

Karmaşık dize filtreleme - orta alan - düzey 1'de 'Değer'

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

Karmaşık dizi filtreleme basit - alan 'Nome' seviye 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>

Ağaç alanlarına filtre uygulama - 2. düzeydeki 'Valor' alanı veya 1. düzeydeki 'Valor' veya düzey 0'daki 'Nome' alanı

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

Varolmayan alanı filtreleme - Varolmayan düzey 3'te 'Valor'

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

Bu bileşen sonsuz nitelik seviyesi ile çalışır ...

Bir ng'yi filtrelemek için Angular 6 ile çalışan basit bir çözüm şudur:

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

Açıklıklar yararlıdır, çünkü doğal olarak hiçbir şeyi temsil etmez.

Eski bir soru olduğunu biliyorum, ancak başka bir çözüm sunmanın yararlı olabileceğini düşündüm.

bunun AngularJS eşdeğeri

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

Açısal 2 ve üzeri sürümlerde aynı öğede * ngFor ve * ngIf kullanamazsınız, böylece aşağıdakiler olacaktır:

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

ve eğer dahili konteyner olarak kullanamıyorsanız bunun yerine ng-container kullanın. ng-container, uygulamanıza koşullu olarak bir grup öğe eklemek istediğinizde (yani * ngIf = "foo" kullanarak), ancak bunları başka bir öğeyle sarmak istemediğinizde kullanışlıdır.

Burada ve başka yerlerde cevaplara dayanan bir dalgıç oluşturdum.

Ayrıca ben bir eklemek zorunda @Input, @ViewChildve ElementRefbir <input>ve oluşturmak vesubscribe() bunun bir gözlemlenebilir için.

Angular2 Arama Filtresi: PLUNKR (GÜNCELLEME: dalgıç artık çalışmıyor)

Boru en iyi yaklaşım olacaktır. ama birinin altında da işe yarayacaktır.

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

Bu benim kodum:

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

Örneklem:

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

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

Uygulamaya özel filtreler için kullanmayı sevdiğim bir diğer yaklaşım, bileşeninizde filtreleme mantığını özel bir boru (IMHO) kullanmaktan daha temiz bir şekilde kapsüllemenizi sağlayan özel bir salt okunur özellik kullanmaktır.

Örneğin, bağlamak albumListve filtre uygulamak istiyorsanız 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;
}

HTML'ye bağlanmak için salt okunur özelliğe bağlanabilirsiniz:

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

Uygulamaya özgü özel filtreler buluyorum, bu, filtreyle ilgili mantığı bileşenle birlikte tuttuğu için bir borudan daha iyi çalışıyor.

Borular, küresel olarak yeniden kullanılabilir filtreler için daha iyi çalışır.

Bir listeden istenen öğeleri almak için aşağıdaki boruyu oluşturdum.

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

}

Küçük harf dönüşümü, duyarsız olması durumunda eşleşir. Görünümünde şöyle kullanabilirsiniz: -

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

İdeal olarak bunun için angualr 2 borusu oluşturmalısınız. Ama bu numarayı yapabilirsiniz.

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

Yukarıda önerilen çok zarif geri arama borusu çözümüne dayanarak, ek filtre parametrelerinin geçirilmesine izin vererek biraz daha genelleştirmek mümkündür. Sonra:

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

bileşen

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>

İşte bir süre önce oluşturduğum ve hakkında blog yazdığım bir çalışma pusulası içeren bir örnek. Herhangi bir nesne listesini filtreleyebilen bir filtre borusu sağlar. Temel olarak yalnızca ngFor belirtiminizde {key: value} özelliğini ve değerini belirtirsiniz.

@ NateMay'ın cevabından çok farklı değil, ancak nispeten ayrıntılı bir şekilde açıklamam.

Benim durumumda, kullanıcının dizimdeki nesnelerin "label" özelliğine karşı bu tür bir işaretleme ile girdiği bazı metinlerde (filterText) sırasız bir listeyi filtreledim:

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

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

Kullanarak Filtre oluşturduğunuz ilk adım @PipeComponent.ts dosyanızda :

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

Person nesnesinin veri yapısı:

person.ts

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

Html dosyasındaki görünümünüzde:

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>

Bu senin dizin

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

        }
    ];

Bu ngFor loop'unuz Filtreleme ölçütü:

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

Orada orijinal ürünlerimi korumak istiyorum, çünkü ürünlerin filterProduct anında kullanıyorum. Burada model _filterText bir giriş kutusu olarak kullanılır.Herhangi bir değişiklik ayarlayıcı işlevi çağrıldığında. SetFilterText performProduct olarak adlandırılırsa, sonuç yalnızca girdiyle eşleşenleri döndürür. Büyük / küçük harfe duyarlı olmayanlar için küçük harf kullanıyorum.

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

Biraz googling yaptıktan sonra karşılaştım ng2-search-filter. In nesneyi alır ve arama terimini, eşleşme arayan tüm nesne özelliklerine uygular.

Bir nesneyi geçen bir filtre yapmak için bir şey buluyordum, sonra çoklu filtre gibi kullanabilirsiniz:

bu Güzellik Çözümünü yaptım:

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