Rupanya, Angular 2 akan menggunakan pipa bukan filter seperti pada Angular1 bersamaan dengan ng-untuk menyaring hasil, meskipun implementasinya tampaknya masih samar-samar, tanpa dokumentasi yang jelas.

Yaitu apa yang saya coba capai dapat dilihat dari perspektif berikut

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

Bagaimana cara mengimplementasikannya menggunakan pipa?

Pada dasarnya, Anda menulis pipa yang kemudian dapat Anda gunakan dalam *ngForarahan.

Di komponen Anda:

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

Di templat Anda, Anda bisa meneruskan string, angka atau objek ke pipa Anda untuk digunakan untuk memfilter:

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

Di pipa Anda:

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

Ingatlah untuk mendaftarkan pipa Anda ke app.module.ts; Anda tidak perlu lagi mendaftar pipa di@Component

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

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

Inilah Plunker yang melakukan demo penggunaan pipa filter khusus dan pipa slice bawaan untuk membatasi hasil.

Harap perhatikan (seperti yang ditunjukkan beberapa komentator) bahwa ada alasan mengapa tidak ada pipa filter bawaan di Angular.

Banyak dari Anda memiliki pendekatan hebat, tetapi tujuannya di sini adalah untuk menjadi generik dan mendefinisikan pipa array yang sangat dapat digunakan kembali di semua kasus dalam hubungannya dengan * ngFor.

callback.pipe.ts (jangan lupa menambahkan ini ke array deklarasi modul Anda)

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

Kemudian di komponen Anda, Anda perlu menerapkan metode dengan signuature berikut (item: any) => boolean , dalam kasus saya misalnya, saya menyebutnya filterUser, yang memfilter usia pengguna yang lebih dari 18 tahun.

Komponen Anda

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

Dan yang tak kalah pentingnya, kode html Anda akan terlihat seperti ini:

HTML Anda

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

Seperti yang Anda lihat, Pipa ini cukup umum di semua array seperti item yang perlu disaring melalui panggilan balik. Di mycase, saya menemukan itu sangat berguna untuk * skenario ngFor.

Semoga ini membantu!!!

codematrix

Cara yang disederhanakan (Digunakan hanya pada array kecil karena masalah kinerja. Dalam array besar Anda harus membuat filter secara manual melalui kode):

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

Pemakaian:

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

Jika Anda menggunakan variabel sebagai argumen kedua, jangan gunakan tanda kutip.

Inilah yang saya terapkan tanpa menggunakan pipa.

component.html

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

komponen.ts

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

Saya tidak yakin kapan itu masuk tetapi mereka sudah membuat pipa slice yang akan melakukan itu. Juga didokumentasikan dengan baik.

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>

Anda juga dapat menggunakan yang berikut ini:

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

Ini hanya akan menampilkan div jika item Anda sesuai dengan kondisi

Lihat dokumentasi sudut untuk informasi lebih lanjut. Jika Anda juga memerlukan indeks, gunakan yang berikut ini:

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

pipa di Angular2 mirip dengan pipa di baris perintah. Output dari masing-masing nilai sebelumnya dimasukkan ke filter setelah pipa yang membuatnya mudah untuk rantai filter juga seperti ini:

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

Untuk persyaratan ini, saya menerapkan dan menerbitkan komponen generik . Lihat

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

Untuk menggunakan komponen ini, sebelumnya, instal paket ini dengan npm:

npm install w-ng5 --save

Setelah itu, impor modul di app.module

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

Pada langkah selanjutnya, tambahkan bagian menyatakan di app.module:

imports: [
  PipesModule,
  ...
]

Penggunaan sampel

Memfilter string sederhana

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

Memfilter string kompleks - bidang 'Nilai' di level 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>

Memfilter string kompleks - bidang tengah - 'Nilai' di level 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>

Memfilter array sederhana yang kompleks - bidang '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>

Memfilter di bidang pohon - bidang 'Valor' di level 2 atau 'Valor' di level 1 atau 'Nome' di level 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>

Memfilter bidang yang tidak ada - 'Valor' di level 3 yang tidak ada

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

Komponen ini berfungsi dengan level atribut ...

Solusi sederhana yang berfungsi dengan Angular 6 untuk memfilter ngFor, berikut ini:

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

Rentang berguna karena tidak secara inheren mewakili apa pun.

Saya tahu ini pertanyaan lama, namun saya pikir mungkin ada gunanya menawarkan solusi lain.

setara dengan AngularJS ini

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

dalam Angular 2+ Anda tidak dapat menggunakan * ngFor dan * ngIf pada elemen yang sama, jadi akan menjadi berikut:

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

dan jika Anda tidak dapat menggunakan wadah internal gunakan wadah-ng sebagai gantinya. ng-container berguna ketika Anda ingin menambahkan sekelompok elemen secara kondisional (yaitu menggunakan * ngIf = "foo") dalam aplikasi Anda tetapi tidak ingin membungkusnya dengan elemen lain.

Saya telah membuat plunker berdasarkan jawaban di sini dan di tempat lain.

Selain itu saya harus menambahkan @Input, @ViewChild, dan ElementRefdari <input>serta membuat dan subscribe()ke diamati itu.

Filter Pencarian Angular2 : PLUNKR (UPDATE: plunker tidak lagi berfungsi)

Pipa akan menjadi pendekatan terbaik. tetapi di bawah satu juga akan berfungsi.

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

Ini kode saya:

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

Sampel:

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

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

Pendekatan lain yang saya suka gunakan untuk aplikasi filter spesifik, adalah dengan menggunakan properti read-only kustom pada komponen Anda yang memungkinkan Anda untuk merangkum logika penyaringan lebih bersih daripada menggunakan pipa kustom (IMHO).

Misalnya, jika saya ingin mengikat albumListdan memfilter 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;
}

Untuk mengikat dalam HTML, Anda kemudian dapat mengikat ke properti hanya-baca:

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

Saya menemukan untuk filter khusus yang spesifik aplikasi ini berfungsi lebih baik daripada pipa karena membuat logika yang terkait dengan filter dengan komponen.

Pipa bekerja lebih baik untuk filter yang dapat digunakan kembali secara global.

Saya membuat pipa berikut untuk mendapatkan barang yang diinginkan dari daftar.

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

}

Konversi huruf kecil hanya untuk mencocokkan jika cara tidak sensitif. Anda dapat menggunakannya dalam tampilan seperti ini: -

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

Idealnya Anda harus membuat 2 pipa angual untuk itu. Tetapi Anda bisa melakukan trik ini.

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

Berdasarkan solusi pipa callback yang sangat elegan yang diusulkan di atas, dimungkinkan untuk menggeneralisasikannya sedikit lebih jauh dengan memungkinkan parameter filter tambahan untuk diteruskan. Kami kemudian memiliki:

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

komponen

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>

Berikut adalah contoh yang saya buat beberapa waktu lalu, dan di-blog, tentang yang termasuk plunk yang berfungsi. Ini menyediakan pipa filter yang dapat menyaring daftar objek. Anda pada dasarnya hanya menentukan properti dan nilai {key: value} dalam spesifikasi ngFor Anda.

Tidak jauh berbeda dari respons @ NateMay, kecuali saya jelaskan dengan detail yang relatif verbose.

Dalam kasus saya, saya memfilter daftar tidak terurut pada beberapa teks (filterText) yang dimasukkan pengguna terhadap properti "label" objek dalam array saya dengan semacam mark-up:

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

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

Langkah pertama Anda membuat Filter menggunakan @Pipefile component.ts Anda:

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

Dan struktur data objek Person:

person.ts

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

Dalam tampilan Anda di 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>

Ini array Anda

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

        }
    ];

Ini adalah loop ngFor Anda. Oleh:

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

Di sana saya menggunakan produk instan filterProduct, karena saya ingin menyimpan data asli saya. Di sini model _filterText digunakan sebagai kotak input. Ketika ada perubahan fungsi setter akan memanggil. Dalam setFilterText performProduct disebut itu akan mengembalikan hasil hanya mereka yang cocok dengan input. Saya menggunakan huruf kecil untuk huruf besar-kecil.

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

Setelah beberapa googling, saya menemukan ng2-search-filter . Di akan mengambil objek Anda dan menerapkan istilah pencarian terhadap semua properti objek yang mencari kecocokan.

Saya menemukan sesuatu untuk membuat filter yang melewati Objek, maka saya dapat menggunakannya seperti multi-filter:

saya melakukan Solusi Kecantikan ini:

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

komponen.ts

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

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