Dla tego wymagania wdrażam i publikuję ogólny komponent . Widzieć
https://www.npmjs.com/package/w-ng5
Aby korzystać z tych komponentów, wcześniej zainstaluj ten pakiet z npm:
npm install w-ng5 --save
Następnie zaimportuj moduł do app.module
...
import { PipesModule } from 'w-ng5';
W następnym kroku dodaj sekcję deklarowania app.module:
imports: [
PipesModule,
...
]
Przykładowe użycie
Filtrowanie prostego ciągu
<input type="text" [(ngModel)]="filtroString">
<ul>
<li *ngFor="let s of getStrings() | filter:filtroString">
{{s}}
</li>
</ul>
Filtrowanie złożonego ciągu - pole „Wartość” na poziomie 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>
Filtrowanie łańcucha złożonego - pole środkowe - „Wartość” na poziomie 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>
Proste filtrowanie złożonej tablicy - pole „Nome” poziom 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>
Filtrowanie w polach drzewa - pole „Waleczność” na poziomie 2 lub „Waleczność” na poziomie 1 lub „Nome” na poziomie 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>
Filtrowanie nieistniejącego pola - „Waleczność” na nieistniejącym poziomie 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>
Ten komponent działa z nieskończonym poziomem atrybutu ...
<div *ngFor="let item of itemsList" *ngIf="conditon(item)" ...