مقالات طراحی سایت

برای فیلتر کردن *ngFor میتوانید یک پایپ  ایجاد کنید. 

برای مثال در کامپوننت خود آرایه زیر را دارید:

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

در تمپلیت، شما میتوانید به پایپ خود رشته، عدد، یا آبجکت پاس بدهید:

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

در پایپ این کدها را دارید:

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

توجه داشته باشید که پایپ خود را در app.module.ts ثبت کنید. با اینکار دیگر نیاز نیست پایپ را در @Component ثبت کنید.

 
import { MyFilterPipe } from './shared/pipes/my-filter.pipe';
@NgModule({
 imports: [
 ..
 ],
 declarations: [
 MyFilterPipe,
 ],
 providers: [
 ..
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }
 

به نقل از: medium