फ़िल्टर को * ngFor पर कैसे लागू करें?

Question

जाहिर है, कोणीय 2 फिल्टर के बजाय पाइप का उपयोग करेगा जैसा कि Angular1 में फिल्टर परिणामों के साथ एनजी के लिए संयोजन के रूप में किया गया है, हालांकि कार्यान्वयन अभी भी अस्पष्ट है, कोई स्पष्ट दस्तावेज नहीं है।

अर्थात् जो मैं प्राप्त करने की कोशिश कर रहा हूं, उसे निम्नलिखित दृष्टिकोण से देखा जा सकता है

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

पाइप का उपयोग करके इसे कैसे लागू किया जाए?

Comments

ध्यान दें कि हैश सिंबल के बारे में एनफॉर के लिए बीटा 17 में ब्रेकिंग चेंज शुरू किया गया है। सही तरीका है:<div *ngFor="let item of itemsList" *ngIf="conditon(item)" ...

— मेमेत ऑलसेन

angulartutorial.net/2016/06/06/…

— Prashobh

नीचे गंटर से @MemetOlsen टिप्पणी: " *ngForऔर *ngIfएक ही तत्व समर्थित नहीं हैं। आपको उनमें से एक के लिए स्पष्ट रूप में बदलने की आवश्यकता है"

— लाल मटर

यहां तक ​​कि यह वही है जो ओपी पूछता है, यह Angular2 + में फ़िल्टर करने या ऑर्डर करने के लिए उपयोग नहीं करने की सिफारिश करता है। फ़िल्टर्ड वैल्यू के साथ एक क्लास प्रॉपर्टी रखना

— ylerjen

Answer 1

मूल रूप से, आप एक पाइप लिखते हैं जिसे आप फिर *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 { }

यहाँ एक प्लंकर है जो एक कस्टम फ़िल्टर पाइप और अंतर्निहित स्लाइस पाइप के उपयोग को परिणामों को सीमित करने के लिए डेमो करता है।

कृपया ध्यान दें (जैसा कि कई टिप्पणीकारों ने बताया है) कि एक कारण है कि कोणीय में निर्मित फिल्टर पाइप नहीं हैं।

Comments

थैंक्स, यह उद्देश्य के रूप में काम करता है, लेकिन कभी-कभी यह जांचना बेहतर होता है कि क्या आइटम सरणी परिभाषित है और शून्य नहीं है, क्योंकि "आइटम" अभी भी अपरिभाषित होने पर Ng2 फ़िल्टर लागू करने का प्रयास कर सकता है।

— तिमंज

इसके अलावा, मुझे @Component घोषणा के लिए फ़िल्टर वर्ग जोड़ने की आवश्यकता थी। जैसे: @Component ({... पाइप: [MyFilterPipe]

— स्टीफन

मुझे लगता है कि इसे भी इस लाइन की जरूरत है (f ((आइटम) रिटर्न आइटम; `यदि सरणी खाली है।

— बोइटजान पिस्लर

कोणीय का कहना है कि पाइप का उपयोग करने से समस्याएँ होती हैं, इसलिए घटक को छानने की सलाह देते हैं

— सेबस्टियन रोजस

मैं *ngForकिसी भी भ्रम से बचने के लिए और इसे "परिवर्तन-प्रूफ" बनाने के लिए, कोष्ठक में पैरामीटर लपेटने का सुझाव देना चाहता हूं :<li *ngFor="let item of (items | myfilter:filterargs)">

— टॉमस

Answer 2

आप में से बहुत से लोग महान दृष्टिकोण रखते हैं, लेकिन यहां लक्ष्य सामान्य होना और एक एरे पाइप को परिभाषित करना है जो कि * एनजीफोर के संबंध में सभी मामलों में बेहद पुन: प्रयोज्य है।

callback.pipe.ts (अपने मॉड्यूल की घोषणा सरणी में इसे जोड़ना न भूलें)

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

फिर आपके घटक में, आपको निम्नलिखित हस्ताक्षर (आइटम: कोई भी) => बूलियन के साथ एक विधि को लागू करने की आवश्यकता है , उदाहरण के लिए, मैंने इसे फ़िल्टरयूजर कहा है, जो उपयोगकर्ताओं की आयु को फ़िल्टर करता है जो 18 वर्ष से अधिक हैं।

आपका घटक

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

और अंतिम लेकिन कम से कम नहीं, आपका html कोड इस तरह दिखेगा:

आपका HTML

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

जैसा कि आप देख सकते हैं, यह पाइप उन सभी सरणी में काफी सामान्य है, जिन पर कॉलबैक के माध्यम से फ़िल्टर करने की आवश्यकता होती है। Mycase में, मैंने इसे परिदृश्यों की तरह * ngFor के लिए बहुत उपयोगी पाया।

उम्मीद है की यह मदद करेगा!!!

codematrix

Comments

मुझे लगता है कि फ़ंक्शन में फ़िल्टरयूज़र () - या मेरे समतुल्य फ़ंक्शन - आप घटक वर्ग में अन्य सभी कार्यों के साथ वर्तमान घटक उदाहरण तक पहुंचने के लिए "इस" का उपयोग नहीं कर सकते। फ़िल्टर किए गए आइटम को संग्रह में रखने के लिए मुझे घटक ऑब्जेक्ट तक पहुंचने की आवश्यकता है।

— पॉल

@Paul, हम्म ... यह असंभव है। क्या आपका तरीका निजी है? ऐसा नहीं होना चाहिए कि निजीकरण केवल संकलन निर्माण हैं और रनटाइम पर लागू नहीं हैं। अपने उदाहरण में मैंने IUser का उपयोग किया। यह मानता है कि संग्रह की वस्तुओं को इसके नक्शे में पुनरावृत्त किया जा रहा है। आप यह देखने के लिए कोई भी प्रयास कर सकते हैं कि यह काम करता है या नहीं। इसके अलावा, सुनिश्चित करें कि नाम सही टाइप किया गया है, केस और सभी।

— कोड 5

मैं इस विधि का उपयोग कर कठबोली पहुंच घटक चर

— suulisin

thisअपरिभाषित होने के मुद्दे से बचने के लिए , आप अपने घटक पर अपनी विधि लिख सकते हैं जैसे filterUser = (user: IUser) =>किfilteruser(user: IUser)

— टॉम

@Paul मुझे पता है कि आपकी मदद करने में बहुत देर हो चुकी है, लेकिन यह दूसरों की मदद कर सकता है। आप thisअपने घटक विधि पर हार रहे थे क्योंकि विधि का उपयोग कॉलबैक के रूप में किया जा रहा था और एक नया thisसंदर्भ लागू किया गया था। आप ऑब्जेक्ट ओरिएंटेड जावास्क्रिप्ट में एक आम समस्या में भाग गए, लेकिन एक पुराना और आसान समाधान है: आप मूल वर्ग के कॉलबैक के रूप में उपयोग किए जाने वाले तरीकों को बांधते हैं। अपने कंस्ट्रक्टर में, निम्न कोड जोड़ें: this.myCallbackFunc = this.myCallbackFunc.bind(this); यह बात है। तुम thisफिर कभी नहीं हारोगे ।

— Randolpho

Answer 3

सरलीकृत तरीका (प्रदर्शन समस्याओं के कारण केवल छोटे सरणियों पर उपयोग किया जाता है। बड़े सरणियों में आपको कोड के माध्यम से मैन्युअल रूप से फ़िल्टर बनाना होगा):

देखें: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbipipe

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

उपयोग:

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

यदि आप दूसरे तर्क के रूप में एक चर का उपयोग करते हैं, तो उद्धरण का उपयोग न करें।

Comments

शायद यह दिखाने के लिए निम्नलिखित जोड़ें कि इसे ReqExp के साथ कैसे जोड़ा जाए: return items.filter (आइटम => {वापसी नई RegExp (मूल्य, "i")। परीक्षण (आइटम [क्षेत्र])});

— जोहान्स

एंगुलर टीम के अनुसार, यह बुरा अभ्यास माना जाता है।

@torazaburo आप उनकी राय का संदर्भ दे सकते हैं या समझा सकते हैं कि क्यों? धन्यवाद

— Zymotik

@Zymotik देखें angular.io/docs/ts/latest/guide/... ।

एंगुलर टीम के अनुसार, यह खराब कोड है क्योंकि यह धीमा है और यह अच्छी तरह से छोटा नहीं है। टीम अपने कोड के कारण धीमी वेबसाइटों को नहीं देखना चाहती है, इसलिए उन्होंने इसे इस समय कोणीय में नहीं बनाया है। angular.io/docs/ts/latest/guide/…

— Zymotik

Answer 4

यह वही है जो मैंने पाइप का उपयोग किए बिना लागू किया था।

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

Comments

मुझे लगता है कि यह कम्प्यूटेशनल रूप से गहन होगा क्योंकि परिवर्तन का पता लगाने के लिए कोणीय हर बार फिल्टर निष्पादित करेगा। यह बड़े सरणियों के लिए अच्छा नहीं होगा। एक क्लीनर, हालांकि कोड के लिए अधिक जटिल है, समाधान itemListएक ऑब्जर्वेबल बनाने के लिए और async फ़िल्टर का उपयोग करना होगा let item of itemsList | async:। जब कोई परिवर्तन होता है, तो नई सूची का अवलोकन योग्य बनाएं। इस तरह, फ़िल्टरिंग कोड केवल तभी चलाया जाता है जब जरूरत हो।

— बीटलज्यूइस

इस उत्तर में नकारात्मक अंक होना चाहिए। यह खराब है, एक पाइप का उपयोग करें।

— सेतिया

Answer 5

मुझे यकीन नहीं है कि जब यह आया था लेकिन उन्होंने पहले से ही स्लाइस पाइप बनाया था जो ऐसा करेगा। यह अच्छी तरह से प्रलेखित भी है।

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>

Comments

यदि आप TrackBy इंटरफ़ेस का उपयोग करते हैं, तो स्लाइस पाइप को पहले लागू किया जाना चाहिए ;। जैसे:*ngFor="let feature of content?.keyFeatures | slice:1:5; trackBy feature?.id"

— फिलिप

Answer 6

आप निम्नलिखित का उपयोग भी कर सकते हैं:

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

यह केवल तभी दिखाएगा जब आपके आइटम शर्त से मेल खाते हों

अधिक जानकारी के लिए कोणीय प्रलेखन देखें यदि आपको भी सूचकांक की आवश्यकता होगी, तो निम्नलिखित का उपयोग करें:

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

Comments

क्या यह केवल फ़िल्टर की गई सूची के बजाय सूची के प्रत्येक आइटम के लिए टेम्प्लेट दर्ज नहीं करेगा? यह एक प्रदर्शन हिट हो सकता है।

— एज़रोथ

Answer 7

Angular2 में पाइप कमांड लाइन पर पाइप के समान हैं। प्रत्येक पूर्ववर्ती मूल्य के आउटपुट को पाइप के बाद फिल्टर में खिलाया जाता है जो चेन फिल्टर को इस तरह से आसान बनाता है:

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

Comments

क्षमा करें यदि यह भ्रामक थी, मेरे यहां मुद्दा यह चर रहा है itemसे *ng-for="#item of itemsList"इस तरह के रूप फिल्टर परिणाम के लिए इस्तेमाल किया जाना चाहिए *ng-if="conditon(item)"। जो इस उदाहरण में काम नहीं करता है ..

— खलद

आप एक फ़िल्टर कर सकते हैं और {{आइटम | कंडीशन}} कंडीशन itemतभी मिलेगी जब कंडीशन पूरी हो और अगर नहीं है तो कोई वैल्यू नहीं।

— बेन ग्लासर

@BenGlasser मुझे लगा कि पाइपों को दाएं-बाएं से लगाया गया है। तो यह पहले फ़िल्टर 2 लागू करेगा, फिर फ़िल्टर 1।

— इवान प्लाइस

*ngForऔर *ngIfएक ही तत्व पर समर्थित नहीं हैं। आपको उनमें से एक के लिए स्पष्ट रूप में बदलने की आवश्यकता है<template ngFor ...>

— गुंटर ज़ोचौएर

@ GünterZöchbauer मुझे एक साल लग गया, लेकिन मैंने आपके द्वारा सुझाए गए परिवर्तनों को प्रतिबिंबित करने के लिए सिंटैक्स को अपडेट किया है

— बेन ग्लासर

Answer 8

इस आवश्यकता के लिए, मैं एक सामान्य घटक को कार्यान्वित और प्रकाशित करता हूं । देख

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

इस घटक का उपयोग करने से पहले, इस पैकेज को npm के साथ स्थापित करें:

npm install w-ng5 --save

बाद, app.module में आयात मॉड्यूल

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

अगले चरण में, app.module के घोषित खंड में जोड़ें:

imports: [
  PipesModule,
  ...
]

नमूना उपयोग

साधारण स्ट्रिंग को छानना

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

फ़िल्टरिंग जटिल स्ट्रिंग - स्तर 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>

फ़िल्टरिंग जटिल स्ट्रिंग - मध्य क्षेत्र - स्तर 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>

फ़िल्टरिंग जटिल सरणी सरल - क्षेत्र 'नोम' स्तर 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>

पेड़ के खेतों में छानना - स्तर 2 में 'Valor' या स्तर 1 में 'Valor' या स्तर 1 में 'Nome'

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

फिल्टरिंग नोक्सेन्शियल फील्ड - नॉनटेक्स्ट लेवल 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>

यह घटक अनंत विशेषता स्तर के साथ काम करता है ...

Comments

नमस्ते, मैं यहां हूं और मैंने सभी चरणों का पालन किया है और इस मामले में मैं *ngFor="let inovice of invoices | filter:searchInvoice"इसका उपयोग कर रहा हूं और यह मेरी सूची में खोज कर रहा है , लेकिन एक रिक्त सूची दिखाता है, क्या आप जानते हैं क्यों?

— jecorrales

नमस्कार, कृपया मुझे बताएं कि आपके चालान की सूची में कौन सी संरचना और प्रकार की वस्तुएं हैं। जिस तरह से आप इसका उपयोग कर रहे हैं वह केवल तभी लागू किया जाना चाहिए जब आपकी चालान सूची टाइप स्ट्रिंग की हो। यदि आप इनवॉइस नंबर (इनवॉइस) द्वारा खोज करना चाहते हैं, तो इसका उपयोग करें: * ngFor = "इनवॉइस इनवॉइस करने दें। फ़िल्टर: {फ़ील्ड: संख्या, मान: searchInvoice}" । यदि आप दो कॉलमों को फ़िल्टर करना चाहते हैं, उदाहरण के लिए, इनवॉइस.customer.name , का उपयोग करें: * ngFor = "इनवॉइस इनवॉइस दें। फ़िल्टर: [फ़ील्ड: संख्या, मान: searchInvoice}, {फ़ील्ड: customer.name, मान: searchInvoice}] ।

— वेसन क्विंटनिला दा सिल्वा

Answer 9

एक सरल समाधान जो एनगुलर को छानने के लिए कोणीय 6 के साथ काम करता है, यह निम्नलिखित है:

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

स्पान उपयोगी होते हैं क्योंकि स्वाभाविक रूप से किसी चीज का प्रतिनिधित्व नहीं करते हैं।

Comments

<span> से बेहतर है <ng- कंटेनर> का उपयोग करें क्योंकि यह कोई अनावश्यक मार्कअप नहीं जोड़ेगा, जो html शोर के अलावा आपके सीएसएस को प्रभावित कर सकता है।

— ट्रेवर डे कोएकोक

Answer 10

मुझे इसका एक पुराना सवाल पता है, हालाँकि, मुझे लगा कि यह एक और समाधान पेश करने में मददगार हो सकता है।

इस के AngularJS के बराबर

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

कोणीय 2+ में आप एक ही तत्व पर * ngFor और * ngIf का उपयोग नहीं कर सकते, इसलिए यह निम्नलिखित होगा:

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

और अगर आप आंतरिक कंटेनर का उपयोग नहीं कर सकते हैं तो इसके बजाय एनजी-कंटेनर का उपयोग करें। एनजी-कंटेनर तब उपयोगी होता है जब आप अपने आवेदन में तत्वों के एक समूह को सशर्त रूप से जोड़ना चाहते हैं (अर्थात * एनजीआईएफ = "फू" का उपयोग करके) लेकिन उन्हें दूसरे तत्व के साथ लपेटना नहीं चाहते हैं।

Answer 11

मैंने यहाँ और दूसरी जगहों के उत्तरों के आधार पर एक प्लंकर बनाया है।

साथ ही मैं एक जोड़ने के लिए किया था @Input, @ViewChildऔर ElementRefकी <input>और बना सकते हैं और subscribe()इसके बारे में एक नमूदार करने के लिए।

Angular2 खोज फ़िल्टर: PLUNKR (अद्यतन: प्लंकर अब काम नहीं करता है)

Answer 12

पाइप सबसे अच्छा तरीका होगा। लेकिन नीचे एक भी काम करेगा।

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

Comments

यह कुछ चीजों को तोड़ सकता है। उदाहरण के लिए एक मैट-फॉर्म-फील्ड के अंदर

— pcnate

Answer 13

यह मेरा कोड है:

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

नमूना:

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

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

Answer 14

एक अन्य दृष्टिकोण जिसे मैं एप्लिकेशन विशिष्ट फ़िल्टर के लिए उपयोग करना पसंद करता हूं, वह है अपने घटक पर एक कस्टम रीड-ओनली प्रॉपर्टी का उपयोग करना जो आपको कस्टम पाइप (IMHO) का उपयोग करने की तुलना में फ़िल्टरिंग तर्क को अधिक सफाई से इनकैप्सुलेट करने की अनुमति देता है।

उदाहरण के लिए, यदि मैं इस पर बाँध albumListऔर फ़िल्टर करना चाहता हूँ 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 में बाँधने के लिए आप केवल पढ़ने के लिए संपत्ति को बाँध सकते हैं:

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

मैं विशेष फिल्टर के लिए खोजता हूं जो अनुप्रयोग विशिष्ट हैं यह एक पाइप से बेहतर काम करता है क्योंकि यह घटक के साथ फिल्टर से संबंधित तर्क रखता है।

विश्व स्तर पर पुन: प्रयोज्य फिल्टर के लिए पाइप बेहतर काम करते हैं।

Comments

क्या यह विधि मूल्यवर्धित दृष्टिकोण का उपयोग करने के बजाय निरंतर गंदे चेकिंग को ट्रिगर नहीं करेगी?

— लीनो पेल्लेटियर

Answer 15

मैंने एक सूची से वांछित आइटम प्राप्त करने के लिए निम्नलिखित पाइप बनाया।

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

}

लोअरकेस रूपांतरण केवल असंवेदनशील तरीके से मेल खाना है। आप इसे इस तरह से अपने विचार में उपयोग कर सकते हैं: -

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

Answer 16

आदर्श रूप से आपको उसके लिए angualr 2 पाइप बनाना चाहिए। लेकिन आप इस ट्रिक को कर सकते हैं।

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

Answer 17

ऊपर प्रस्तावित बहुत ही सुरुचिपूर्ण कॉलबैक पाइप समाधान के आधार पर, अतिरिक्त फिल्टर मापदंडों को साथ पारित करने की अनुमति देकर इसे थोड़ा आगे सामान्य करना संभव है। हमारे पास तब है:

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

अंग

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

एचटीएमएल

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

Answer 18

यहाँ एक उदाहरण है जो मैंने थोड़ी देर पहले बनाया है, और इसके बारे में ब्लॉग किया है, जिसमें एक काम करने वाला प्लंक शामिल है। यह एक फिल्टर पाइप प्रदान करता है जो वस्तुओं की किसी भी सूची को फ़िल्टर कर सकता है। आप मूल रूप से अपने ngFor विनिर्देश के भीतर केवल संपत्ति और मूल्य {key: value} निर्दिष्ट करते हैं।

यह @ नैटमाय की प्रतिक्रिया से बहुत अलग नहीं है, सिवाय इसके कि मैं इसे अपेक्षाकृत क्रिया विस्तार से समझाता हूं।

मेरे मामले में, मैंने कुछ टेक्स्ट (फ़िल्टरटेक्स्ट) पर एक अनियंत्रित सूची को फ़िल्टर किया, जो उपयोगकर्ता इस तरह के मार्क-अप के साथ मेरे एरे में ऑब्जेक्ट्स की "लेबल" संपत्ति के खिलाफ दर्ज किया गया है:

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

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

Answer 19

पहला @Pipeघटक जिसे आप अपने कंपोनेंट .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
    }
})

और व्यक्ति की डेटा संरचना:

person.ts

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

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>

Answer 20

यह आपकी सरणी है

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

        }
    ];

यह आपका एनजीफ़ोर लूप फ़िल्टर है:

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

वहां मैं उत्पादों के तुरंत फ़िल्टर का उपयोग कर रहा हूं, क्योंकि मैं अपने मूल डेटा को संरक्षित करना चाहता हूं। यहां मॉडल _filterText का उपयोग इनपुट बॉक्स के रूप में किया जाता है। जब भी कभी कोई परिवर्तन सेटर फ़ंक्शन कॉल करेगा। SetFilterText PerformProduct में यह कहा जाता है कि यह केवल उन लोगों को परिणाम देगा जो इनपुट के साथ मेल खाते हैं। मैं केस असंवेदनशील के लिए लोअर केस का उपयोग कर रहा हूं।

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

Answer 21

कुछ गुगली करने के बाद, मैं भर आया ng2-search-filter। अपनी वस्तु ले जाएगा और एक मैच की तलाश में सभी वस्तु गुणों के खिलाफ खोज शब्द को लागू करेगा।

Answer 22

मैं किसी वस्तु को पास करने के लिए एक फिल्टर बनाने के लिए सोमिथिग ढूंढ रहा था, फिर मैं इसे मल्टी-फिल्टर की तरह उपयोग कर सकता हूं:

मैंने यह ब्यूटी सॉल्यूशन किया:

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