Comment obtenir la liste filtrée (avec tuyau)?

Question

J'ai un tuyau pour filtrer:

@Pipe({ 
name: 'filter' 
}) 
export class FilterPipe implements PipeTransform { 
transform(items: Array<any>, filter: { [key: string]: any }): Array<any> { 
    return items.filter(item => { 
     let notMatchingField = Object.keys(filter) 
      .find(key => item[key] !== filter[key]); 
     return !notMatchingField; // true if matches all fields 
    }); 
} 


} 

et je filtrent ma liste anotherpage.html:

<tr *ngFor="let item of _FilteredList | filter:peopleFilter" >

dans anotherpage.ts i détecter le contexte peopleFilter:

this.peopleFilter = { NAME: 'Gülcan' }; 

donc je l'exécute, je reçois tous les objets avec des noms sont «Gülcan» dans ma table. Mais j'ai écrit dans mon autre page: console.log(this._FilteredList) je vois tous les éléments dans cette liste. Y at-il de toute façon de voir seulement ces éléments filtrés?

Answer 1

Essayez ce code pour le filtre. Il fonctionne pour moi:

import {Pipe, PipeTransform} from '@angular/core'; 

@Pipe({ 
    name: 'filterPipe' 
}) 
export class FilterPipe implements PipeTransform { 
    transform(data: any[], keys: string[], filter: string) { 
     if (!filter || !keys || keys.length <= 0) { 
      return data; 
     } else { 
      return data.filter((elem) => { 
       var matched = false; 
       for (let key of keys) { 
        matched = matched || elem[key].toLocaleLowerCase().indexOf(filter.toLocaleLowerCase()) !== -1 
        if (matched) { 
         return true; 
        } 
       } 
       return matched; 
      }); 
     } 
    } 
} 

MISE À JOUR HTML:

<tr *ngFor="let item of (_FilteredList | filterPipe:peopleFilter)"> 

Answer 2

Filtre ne change pas tableau source. Il produit un autre tableau qui est ensuite rendu dans le modèle. Il n'y a actuellement aucun moyen d'y accéder, mais d'un autre côté, je ne pense pas que ce soit vraiment nécessaire. Si vous avez besoin d'un tableau filtré dans votre code, placez-le là et rendez-le dans le modèle au lieu de l'original.

Donc, ce que vous voulez est quelque chose comme ceci:

app.component.ts

import {Component} from '@angular/core'; 
import {AppFilter} from './filter.pipe'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    items: any[] = []; 
    filteredItems: any[] = []; 
    private _filterId: string; 
    get filterId(): string { 
     return this._filterId; 
    } 
    set filterId(val: string) { 
     this._filterId = val; 
     this.filteredItems = this.filter.transform(this.items, {id: val}); 
    } 
    constructor(private filter: AppFilter) { 
     this.items = [ 
      { 
       id: '1', 
       text: 'item 1' 
      }, 
      { 
       id: '2', 
       text: 'item 2' 
      } 
     ]; 
     this.filterId = '1'; 
    } 
} 

app.component.html

<div> 
    <input type="text" [(ngModel)]="filterId" /> 
    <div *ngFor="let item of filteredItems">{{item.text}}</div> 
</div> 

app.module .ts

import {BrowserModule} from '@angular/platform-browser'; 
import {NgModule} from '@angular/core'; 

import {AppComponent} from './app.component'; 
import {FormsModule, ReactiveFormsModule} from '@angular/forms'; 
import {AppFilter} from './filter.pipe'; 

@NgModule({ 
    declarations: [ 
     AppComponent, 
     AppFilter 
    ], 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     ReactiveFormsModule 
    ], 
    providers: [AppFilter], // <--- !!! it must be provided by some component or module 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

filter.pipe.ts

import {Pipe, PipeTransform} from '@angular/core'; 

@Pipe({ 
    name: 'filter' 
}) 
export class AppFilter implements PipeTransform { 
    transform(value: any, filter: {[key: string]: any}): any { 
     if (!value || !filter) { 
      return value; 
     } 
     return value.filter(item => { 
      return !Object.keys(filter).find(key => filter[key] && (item[key] !== filter[key])); 
     }); 
    } 
}