এই প্রয়োজনীয়তার জন্য, আমি একটি জেনেরিক উপাদানটি বাস্তবায়ন করি এবং প্রকাশ করি । দেখা
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>
এই উপাদানটি অসীম বৈশিষ্ট্য স্তরের সাথে কাজ করে ...
<div *ngFor="let item of itemsList" *ngIf="conditon(item)" ...