* এনজিফোর্ডে কীভাবে ফিল্টার প্রয়োগ করবেন?


278

স্পষ্টতই, কৌণিক 2 ফিল্টারগুলির পরিবর্তে পাইকারগুলি অ্যাঙ্গুলার 1-এর সাথে এনজি-ফর ফিল্টার করতে ফলাফলগুলি ব্যবহার করবে, যদিও বাস্তবায়ন এখনও অস্পষ্ট বলে মনে হচ্ছে, কোনও স্পষ্ট দলিল নেই।

যাহা আমি অর্জন করতে চাইছি নিম্নলিখিত দৃষ্টিকোণ থেকে দেখা যেতে পারে

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

কিভাবে পাইপ ব্যবহার করে এটি বাস্তবায়ন?


8
মনে রাখবেন যে হ্যাশ প্রতীক সম্পর্কিত এনজিফোর্ডের জন্য বিটা 17 তে একটি ব্রেকিং পরিবর্তন প্রবর্তিত হয়েছে। সঠিক <div *ngFor="let item of itemsList" *ngIf="conditon(item)" ...
উপায়টি


11
নীচে গুন্টারের কাছ থেকে মেমিট ওলসনের মন্তব্য: " *ngForএবং *ngIfএকই উপাদানটির জন্য সমর্থিত নয়। তাদের একটির জন্য আপনাকে সুস্পষ্ট ফর্মে পরিবর্তন করতে হবে"
দ্য রেড মটর

1
এমনকি ওপি যা যা চায় তার জন্য, এটি Angular2 + এ ফিল্টারিং বা অর্ডার দেওয়ার জন্য পাইপ ব্যবহার না করার জন্য পুনরায় দাবি জানানো হয়। ফিল্টারকৃত মানগুলির সাথে শ্রেণীর সম্পত্তি থাকা পছন্দ করুন: কৌণিক.ইও
পাইপসমূহ#

উত্তর:


395

মূলত, আপনি একটি পাইপ লিখেন যা আপনি *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 { }

এখানে একটি প্লঙ্কার রয়েছে যা কাস্টম ফিল্টার পাইপ এবং বিল্ট-ইন স্লাইস পাইপের ব্যবহার সীমাবদ্ধ করতে ফলাফল সীমাবদ্ধ করে।

দয়া করে নোট করুন (বেশ কয়েকটি ভাষ্যকার যেমন উল্লেখ করেছেন) যে কোনও কারণে কৌণিক মধ্যে অন্তর্নির্মিত ফিল্টার পাইপ না থাকার একটি কারণ রয়েছে।


6
থ্যাঙ্কস, এই কাজটি ইচ্ছাকৃত, তবে কখনও কখনও আইটেমগুলির অ্যারে সংজ্ঞায়িত হয় এবং নাল নয় তা যাচাই করা ভাল কারণ এনজি 2 ফিল্টার প্রয়োগ করার চেষ্টা করতে পারে যখন "আইটেমগুলি" অপরিবর্তিত রয়েছে।
টিমজ

1
এছাড়াও, আমাকে @ কম্পোমেন্ট ঘোষণায় ফিল্টার ক্লাস যুক্ত করা দরকার। লাইক সো: @ কম্পোনেন্ট ({... পাইপস: [মাইফিল্টারপাইপ]
স্টিফেন

1
আমি মনে করি অ্যারেটি খালি থাকলে ((! আইটেমগুলি) ফেরত আইটেমগুলি `এরও এই লাইনটি দরকার।
বোতজান পাইলারের

2
কৌণিক বলে যে পাইপ ব্যবহারের সাথে পারফরম্যান্সের সমস্যা রয়েছে তাই উপাদানটিতে ফিল্টারিংয়ের পরামর্শ দেওয়া হয়েছে
সেবাস্তিয়ান রোজাস

3
আমি *ngForকোনও বন্ধুত্ব এড়াতে এবং এটিকে "পরিবর্তন-প্রমাণ" তৈরি করতে প্যারাম্যাসিসে প্যারামিটারগুলি মোড়ানোর পরামর্শ দিতে চাই :<li *ngFor="let item of (items | myfilter:filterargs)">
টমাস 25'18

104

আপনার অনেকের কাছে দুর্দান্ত দৃষ্টিভঙ্গি রয়েছে তবে এখানে লক্ষ্যটি হ'ল জেনেরিক এবং একটি অ্যারে পাইপ সংজ্ঞায়িত করা যা * এনজিফোর্ডের সাথে সম্পর্কের ক্ষেত্রে সমস্ত ক্ষেত্রেই পুনরায় ব্যবহারযোগ্য।

কলব্যাক.পিপ.সেটস (এটি আপনার মডিউলের ঘোষণার অ্যারেতে যুক্ত করতে ভুলবেন না)

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

তারপরে আপনার উপাদানটিতে, আপনাকে নিম্নোক্ত স্বাক্ষর (আইটেম: যে কোনও) => বুলিয়ান সহ একটি পদ্ধতি প্রয়োগ করতে হবে , উদাহরণস্বরূপ, আমি এটিকে ফিল্টারউজার বলেছি, যা ব্যবহারকারীদের বয়স ১৮ বছরের বেশি ফিল্টার করে।

আপনার উপাদান

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

এবং সর্বশেষে তবে সর্বনিম্ন নয়, আপনার এইচটিএমএল কোডটি দেখতে এমন দেখাচ্ছে:

আপনার এইচটিএমএল

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

আপনি দেখতে পাচ্ছেন, এই পাইপটি সমস্ত অ্যারে জুড়ে মোটামুটি জেনেরিক আইটেমগুলির মতো যা কলব্যাকের মাধ্যমে ফিল্টার হওয়া দরকার। মাইকেসে, আমি দৃশ্যের মতো * এনজিওর জন্য এটি খুব দরকারী বলে মনে করেছি।

আশাকরি এটা সাহায্য করবে!!!

codematrix


4
আমি লক্ষ্য করেছি যে ফাংশন ফিল্টারউজারে () - বা আমার সমতুল্য ফাংশন - আপনি বর্তমান উপাদান উপাদানটি অ্যাক্সেস করতে "এটি" ব্যবহার করতে পারবেন না যেমন আপনি উপাদান শ্রেণীর অন্যান্য সমস্ত ফাংশন সহ করতে পারেন। ফিল্টার করা আইটেমটি সংগ্রহে রয়েছে তা পরীক্ষা করতে আমার উপাদান উপাদানটি অ্যাক্সেস করতে হবে।
পল

1
@ পল, হুম ... এটি অসম্ভব। আপনার পদ্ধতিটি কি ব্যক্তিগত? এগুলি গুরুত্বপূর্ণ নয় কারণ ব্যক্তিগতকৃতগুলি কেবল সংকলনগুলি এবং রানটাইমে প্রয়োগ করা হয় না। আমার উদাহরণে আমি আইউসার ব্যবহার করেছি। এটি ধরে নেওয়া হয় যে সংগ্রহের আইটেমগুলি এটির পুনরুক্তিযুক্ত মানচিত্র। এটি কার্যকর হয় কিনা তা দেখতে আপনি যে কোনও চেষ্টা করতে পারেন। এছাড়াও, নামটি সঠিক, কেস এবং সমস্ত কিছু টাইপ করা আছে তা নিশ্চিত করুন।
কোড5

1
আমি এই পদ্ধতিটি ব্যবহার করে উপাদান ভেরিয়েবল অ্যাক্সেস করতে পারি না
সুলিসিন

10
thisঅপরিশোধিত হওয়ার বিষয়টি এড়াতে আপনি নিজের পদ্ধতির filterUser = (user: IUser) =>পরিবর্তে আপনার উপাদানটিতে লিখতে পারেনfilteruser(user: IUser)
টম

2
@ পল আমি জানি যে আপনাকে সাহায্য করতে খুব দেরী হয়েছে তবে এটি অন্যকে সাহায্য করতে পারে। আপনি thisআপনার উপাদান পদ্ধতিটি হারাতে হলেন কারণ এই পদ্ধতিটি কলব্যাক হিসাবে ব্যবহৃত হচ্ছে এবং একটি নতুন thisপ্রসঙ্গ প্রয়োগ করা হয়েছিল। আপনি অবজেক্ট ওরিয়েন্টেড জাভাস্ক্রিপ্টে একটি সাধারণ সমস্যার মধ্যে পড়েছিলেন তবে এর একটি পুরানো এবং সহজ সমাধান রয়েছে: আপনি মূল বর্গকে কলব্যাক হিসাবে ব্যবহার করার পদ্ধতিগুলিকে আবদ্ধ করেন। আপনার নির্মাতায়, নিম্নলিখিত কোড যুক্ত করুন: this.myCallbackFunc = this.myCallbackFunc.bind(this); এটিই it আপনি আর কখনও হারাবেন thisনা।
র‌্যান্ডলফো

36

সরলীকৃত উপায়ে (পারফরম্যান্স সমস্যার কারণে কেবলমাত্র ছোট অ্যারেগুলিতে ব্যবহৃত হয় large বড় অ্যারেগুলিতে আপনাকে কোডের মাধ্যমে ম্যানুয়ালি ফিল্টার তৈরি করতে হবে):

দেখুন: https://angular.io/guide/pines#appendix-no- ফিল্টারপাইপ- অথবা- অর্ডারবাইপ

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

আপনি যদি দ্বিতীয় তর্ক হিসাবে ভেরিয়েবল ব্যবহার করেন তবে উদ্ধৃতিগুলি ব্যবহার করবেন না।


3
এটি কীভাবে রেকএক্সপ এক্সপের সাথে একত্রিত করা যায় তা দেখানোর জন্য নিম্নলিখিতগুলি যুক্ত করুন: রিটার্ন আইটেমস f ফিল্টার (আইটেম => new নতুন রেজিপ্যাক্স (মান, "i") ফেরান test পরীক্ষা (আইটেম [ক্ষেত্র])});
জোহানেস

8
কৌণিক দলের মতে এটি খারাপ অভ্যাস হিসাবে বিবেচিত হয়।

@ টোরাজাবুরো আপনি তাদের মতামত উল্লেখ করতে পারেন বা ব্যাখ্যা করতে পারেন কেন? ধন্যবাদ
জিমোটিক

1
@ জিমোটিক দেখুন কৌণিক.আইও / ডকস / এসটিস / স্লেস্ট / গুইড /

2
কৌণিক টিমের মতে, এটি দরিদ্র কোড কারণ এটি ধীর এবং এটি ভালভাবে সংশোধন করা হয়নি। দলটি তাদের কোডের কারণে ধীর ওয়েবসাইটগুলি দেখতে চায় না তাই তারা এটিকে এখন কৌণিক আকারে তৈরি করে না। কৌণিক.ই.ও.
আরএস /

29

এটি আমি পাইপ ব্যবহার না করে বাস্তবায়ন করেছি।

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

16
আমি মনে করি এটি গণনাগতভাবে নিবিড় হবে কারণ অ্যাঙ্গুলার যতবার এটি সনাক্তকরণ চালায় ততবার ফিল্টারটি কার্যকর করবে। এটি বড় অ্যারেগুলিতে ভাল স্কেল করবে না। একটি ক্লিনার, যদিও আরো কোডে জটিল, সমাধান করতে হবে itemListএকটি লক্ষণীয় এবং ASYNC ফিল্টার ব্যবহার করুন: let item of itemsList | async। যখন কোনও পরিবর্তন আসে, পর্যবেক্ষণযোগ্য নতুন তালিকাটি নির্গমন করুন make এইভাবে, ফিল্টারিং কোডটি কেবলমাত্র যখন প্রয়োজন হয় তখন চালানো হয়।
বিটলজুইস

1
এই উত্তরের একটি নেতিবাচক স্কোর হওয়া উচিত। এটা খারাপ, একটি পাইপ ব্যবহার করুন।
সিটিয়া

19

কখন আসল তা আমি নিশ্চিত নই তবে তারা ইতিমধ্যে স্লাইস পাইপ তৈরি করেছে যা এটি করবে। এটি খুব ভাল নথিভুক্ত।

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>

4
আপনি যদি ট্র্যাকবাই ইন্টারফেস ব্যবহার করেন তবে স্লাইস পাইপ অবশ্যই প্রয়োগ করা উচিত ;। যেমন:*ngFor="let feature of content?.keyFeatures | slice:1:5; trackBy feature?.id"
ফিলিপ

11

আপনি নিম্নলিখিত ব্যবহার করতে পারেন:

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

1
এটি কেবল ফিল্টার করা তালিকার পরিবর্তে তালিকার প্রতিটি আইটেমের টেম্পলেটটি প্রবেশ করবে না? এটি একটি পারফরম্যান্স হিট হতে পারে।
Azeroth2b

8

Angular2 এর পাইপগুলি কমান্ড লাইনের পাইপের অনুরূপ। প্রতিটি পূর্বের মানের আউটপুট পাইপের পরে ফিল্টারে খাওয়ানো হয় যা ফিল্টারগুলি চেইন করা সহজ করে তোলে যেমন:

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

দুঃখিত এটি যদি বিভ্রান্তিকর হয় তবে আমার পয়েন্টটি এখানে পরিবর্তনশীল itemযা *ng-for="#item of itemsList"ফলাফলগুলি ফিল্টার করার জন্য ব্যবহার করা উচিত *ng-if="conditon(item)"। যা এই উদাহরণে কাজ করে না ..
খালেদ

আপনি শর্তটিকে একটি ফিল্টার তৈরি করতে এবং thing {আইটেম দিয়ে একই জিনিস করতে পারেন শর্ত} item। শর্তটি পূরণ করা হলে শর্তটি কেবল ফিরে আসবে এবং যদি মানটি না হয় তবে এটির কোনও মূল্য নেই।
বেন গ্লাসার

@ বেনগ্লাসার ভেবেছিলাম পাইপগুলি ডান থেকে বামে প্রয়োগ করা হয়েছিল। সুতরাং এটি প্রথমে ফিল্টার 2 প্রয়োগ করবে, তারপরে ফিল্টার 1।
ইভান প্লেস

12
*ngForএবং *ngIfএকই উপাদান সমর্থিত হয় না। তাদের মধ্যে একটির জন্য আপনাকে স্পষ্ট ফর্মে পরিবর্তন করতে হবে<template ngFor ...>
গন্টার জ্যাচবাউয়ার

1
@ গন্তেরজ্যাচবাউয়ার এটি আমার এক বছর লেগেছে, তবে আপনার প্রস্তাবিত পরিবর্তনগুলি প্রতিবিম্বিত করতে আমি সিনট্যাক্সটি আপডেট করেছি
বেন গ্লাসার

5

এই প্রয়োজনীয়তার জন্য, আমি একটি জেনেরিক উপাদানটি বাস্তবায়ন করি এবং প্রকাশ করি । দেখা

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

এই উপাদানগুলি ব্যবহারের জন্য, আগে এই প্যাকেজটি এনপিএম সহ ইনস্টল করুন:

npm install w-ng5 --save

এর পরে, app.module এ আমদানি করুন মডিউল

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

পরবর্তী পদক্ষেপে, অ্যাপ্লিকেশনটির বিভাগ ঘোষণা করার জন্য যুক্ত করুন add

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 তে 'বীরত্ব' বা স্তর 1 তে 'বীরত্ব' বা স্তর 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>

অস্তিত্বহীন ক্ষেত্র ফিল্টারিং - অস্তিত্বের স্তর 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>

এই উপাদানটি অসীম বৈশিষ্ট্য স্তরের সাথে কাজ করে ...


হাই, আমি এখানে আছি এবং আমি সমস্ত পদক্ষেপগুলি অনুসরণ করেছি এবং এক্ষেত্রে আমি *ngFor="let inovice of invoices | filter:searchInvoice"এটি ব্যবহার করছি এবং এটি আমার তালিকায় অনুসন্ধান করছে, তবে একটি ফাঁকা তালিকা দেখায়, আপনি কেন জানেন?
jecorrales

1
হ্যালো, দয়া করে আমাকে বলুন যে আপনার চালানের তালিকায় থাকা অবজেক্টের কাঠামো এবং প্রকারগুলি কী। আপনি যেভাবে এটি ব্যবহার করছেন তা কেবল তখনই প্রয়োগ করা উচিত যদি আপনার চালানের তালিকাটি স্ট্রিংয়ের হয়। আপনি যদি চালান নম্বর ( চালান.নম্বার ) দ্বারা অনুসন্ধান করতে চান তবে এটি ব্যবহার করুন: * ngFor = "চালানের চালানগুলি | ফিল্টার: {ক্ষেত্র: সংখ্যা, অনুসন্ধান: ইনভয়েস}" দিন । আপনি যদি দুটি কলাম দ্বারা ফিল্টার করতে চান, উদাহরণস্বরূপ, invoice.customer.name , ব্যবহার করুন: * এনজিফোর্ড = "চালানের ইনভয়েস যাক | ফিল্টার: [ক্ষেত্র: সংখ্যা, অনুসন্ধান: ইনভয়েস}, {ক্ষেত্র: ग्राहक.নাম, মান: অনুসন্ধানইনভয়েস}]
ওয়েডসন কুইন্টানিলহা দা সিলভা

4

একটি সহজ সমাধান যা এনজিফোর্ডে ফিল্টার করার জন্য কৌনিক 6 এর সাথে কাজ করে, এটি নিম্নলিখিত:

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

স্প্যানগুলি কার্যকর কারণ কোনও কিছু সহজাতভাবে উপস্থাপন করে না।


1
<span> এর চেয়ে ভাল <ng-container> ব্যবহার করা হ'ল এটি কোনও অপ্রয়োজনীয় মার্কআপ যুক্ত করবে না যা এইচটিএমএল শোরগোল ছাড়াও আপনার সিএসএসকে প্রভাবিত করতে পারে।
ট্রেভর ডি কোয়েকোয়েক

4

আমি এটির একটি পুরানো প্রশ্ন জানি, তবে আমি ভেবেছিলাম এটি অন্য কোনও সমাধান দেওয়ার পক্ষে সহায়ক helpful

এর AngularJS এর ​​সমতুল্য

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

কৌণিক 2+ এ আপনি একই উপাদানের উপর * এনজিফোর্ড এবং * এনজিআই ব্যবহার করতে পারবেন না, সুতরাং এটি নিম্নলিখিত হবে:

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

এবং যদি আপনি অভ্যন্তরীণ ধারক হিসাবে এনজি-ধারক ব্যবহার না করে ব্যবহার করতে পারেন। এনজি-কন্টেইনার কার্যকর যখন আপনি শর্তসাপেক্ষে আপনার অ্যাপ্লিকেশনটিতে একটি গ্রুপের উপাদান (যেমন * এনজিআইফ = "ফু" ব্যবহার করে) যুক্ত করতে চান তবে সেগুলি অন্য কোনও উপাদান দিয়ে মোড়াতে চান না।


4

আমি এখানে এবং অন্য কোথাও উত্তরগুলির ভিত্তিতে একটি প্লঙ্কার তৈরি করেছি।

উপরন্তু আমি একজন যোগ করার জন্য ছিল @Input, @ViewChildএবং ElementRefএর <input>এবং তৈরি এবং subscribe()এটি একটি লক্ষণীয় করতে।

Angular2 অনুসন্ধান ফিল্টার: PLUNKR (আপডেট: প্লাঙ্কার আর কাজ করে না)


3

পাইপ সেরা পদ্ধতির হবে। কিন্তু নীচে এক কাজ করবে।

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

এটি কিছু জিনিস ভাঙ্গতে পারে। উদাহরণস্বরূপ, একটি মাদুর-ফর্ম-ফিল্ডের অভ্যন্তরে
পিসনেট

2

এটি আমার কোড:

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>

1

অ্যাপ্লিকেশন নির্দিষ্ট ফিল্টারগুলির জন্য আমি ব্যবহার করতে চাই এমন আরেকটি পদ্ধতি হ'ল আপনার উপাদানটিতে একটি কাস্টম পঠনযোগ্য সম্পত্তি ব্যবহার করা যা আপনাকে একটি কাস্টম পাইপ (আইএমএইচও) ব্যবহার করার চেয়ে ফিল্টারিংয়ের যুক্তিকে আরও পরিষ্কারভাবে সজ্জিত করতে দেয়।

উদাহরণস্বরূপ, যদি আমি বাঁধতে 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;
}

এইচটিএমএলকে বাঁধতে আপনি তারপরে কেবল পঠনযোগ্য বৈশিষ্ট্যে বাঁধতে পারেন:

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

আমি বিশেষায়িত ফিল্টারগুলি সন্ধান করি যা অ্যাপ্লিকেশন নির্দিষ্ট এই পাইপের চেয়ে ভাল কাজ করে কারণ এটি উপাদানটির সাথে ফিল্টারের সাথে যুক্তি যুক্ত রাখে।

পাইপগুলি বিশ্বব্যাপী পুনঃব্যবহারযোগ্য ফিল্টারগুলির জন্য আরও ভাল কাজ করে।


1
এই পদ্ধতিটি কোনও মান পরিবর্তিত পদ্ধতির পরিবর্তে অবিচ্ছিন্ন নোংরা চেকগুলি ট্রিগার করবে না?
লিওন পেলিটের

1

একটি তালিকা থেকে পছন্দসই আইটেমগুলি পাওয়ার জন্য আমি নীচের পাইপটি তৈরি করেছি।

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>

1

আদর্শভাবে আপনার জন্য কৌনিক 2 পাইপ তৈরি করা উচিত। তবে আপনি এই কৌশলটি করতে পারেন।

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

1

উপরে প্রস্তাবিত খুব মার্জিত কলব্যাক পাইপ সমাধানের উপর ভিত্তি করে অতিরিক্ত ফিল্টার পরামিতিগুলি পাশ করার অনুমতি দিয়ে এটি আরও কিছুটা সাধারণ করা সম্ভব। আমাদের তখন রয়েছে:

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>

0

এখানে একটি উদাহরণ রয়েছে যা আমি কিছুক্ষণ আগে তৈরি করেছিলাম এবং ব্লগিং করেছি যার মধ্যে একটি কার্যকরী প্লাঙ্ক রয়েছে। এটি একটি ফিল্টার পাইপ সরবরাহ করে যা বস্তুর যে কোনও তালিকা ফিল্টার করতে পারে। আপনি মূলত আপনার এনজিওর জন্য নির্দিষ্টকরণের মধ্যে সম্পত্তি এবং মান {কী: মান specify নির্দিষ্ট করে।

এটি @ নাটমেয়ের প্রতিক্রিয়া থেকে খুব বেশি আলাদা নয়, আমি তুলনামূলক ভার্বোজের বিশদে বিশদভাবে ব্যাখ্যা করি।

আমার ক্ষেত্রে, আমি কিছু পাঠ্য (ফিল্টারটেক্সট) -তে একটি অনর্ডারযুক্ত তালিকা ফিল্টার করেছি যা এই ধরণের মার্ক আপ দিয়ে আমার অ্যারেতে থাকা সামগ্রীর "লেবেল" সম্পত্তিটির বিরুদ্ধে প্রবেশ করেছে:

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

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


0

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

এইচটিএমএল ফাইলে আপনার দৃষ্টিতে:

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>

0

এটি আপনার অ্যারে

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

        }
    ];

এটি আপনার এনজিফোর্ড লুপ ফিল্টার দ্বারা:

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

সেখানে আমি পণ্যগুলির ফিল্টারপ্রডাক্ট তাত্ক্ষণিক ব্যবহার করছি, কারণ আমি আমার মূল ডেটা সংরক্ষণ করতে চাই। এখানে মডেল _ ফিল্টারটেক্সট একটি ইনপুট বাক্স হিসাবে ব্যবহৃত হয় hen যখনই কোনও পরিবর্তন সেটার ফাংশন কল করবে। সেট ফিল্টারটেক্সট পারফরম্যান্সে প্রোডাক্টকে বলা হয় ফলাফলটি কেবল তারাই প্রত্যাবর্তন করবে যারা ইনপুটটির সাথে মেলে। সংক্ষিপ্ত সংবেদনশীল ক্ষেত্রে আমি লোয়ার কেস ব্যবহার করছি।

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

0

কিছু গুগল করার পরে, আমি পেরিয়ে এসেছি ng2-search-filter। আপনার বস্তু গ্রহণ করবে এবং ম্যাচের জন্য সন্ধানকারী সমস্ত অবজেক্ট বৈশিষ্ট্যের বিপরীতে অনুসন্ধান শব্দটি প্রয়োগ করবে।


0

আমি কোনও অবজেক্টকে পাশ কাটিয়ে একটি ফিল্টার তৈরির সন্ধান করছিলাম, তবে আমি এটি বহু-ফিল্টারের মতো ব্যবহার করতে পারি: মাল্টি ফিল্টার উদাহরণ

আমি এই বিউটি সলিউশনটি করেছি:

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">...
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.