Invoke tuyau lorsque la fonction passe comme arg tuyau angular2

Question

J'ai une liste de emplyees et que vous souhaitez faire un menu déroulant avec filtre du département prédéfini

Im essayant de faire un tuyau de filtre et passer une fonction comme arg il ne fonctionne que la première fois de son rendu, mais je veux invoquer le tuyau à chaque fois que l'utilisateur modifie la sélection

tuyau:

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

    @Pipe({ 
    name: 'filter' 
    }) 
    @Injectable() 
    export class FilterPipe implements PipeTransform { 

     transform(value: Array<any>, f) { 
      return value.filter(x => f(x)); 
    } 
    } 

Composant:

 constructor() { 

     this.filterFunc = this.filterByDepatment.bind(this); 
    } 
    //filter function 
    filterByDepatment(e) { 

    if (this.selectedDepartment > -1) { 
     return (e.Departments as Array<any>).find(x => x.Id === this.selectedDepartment); 
    } else { 
     return true; 
    } 
    } 

Modèle:

<select [(ngModel)]="selectedDepartment"> 
    <option value="-1">All</option> 
    <option value="{{d.Id}}" *ngFor="let d of departments">{{d.Name}}</option> 
</select> 
<div class="card" *ngFor="let emp of (employees | filter: filterFunc)"> 

Answer 1

Je pense que le plus simple est de passer la valeur sélectionnée

<div class="card" *ngFor="let emp of (employees | filter: filterFunc:selectedDepartment)"> 

De cette façon, la conduite doit être exécutée chaque fois que selectedDepartment changements.

Answer 2

Ce n'est pas une bonne idée d'utiliser un tuyau pour le filtrage. Voir le lien ici: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

Au lieu de cela, ajoutez du code dans votre composant pour effectuer votre filtrage.

Voici un exemple:

import { Component, OnInit } from '@angular/core'; 

import { IProduct } from './product'; 
import { ProductService } from './product.service'; 

@Component({ 
    templateUrl: './product-list.component.html' 
}) 
export class ProductListComponent implements OnInit { 

    _listFilter: string; 
    get listFilter(): string { 
     return this._listFilter; 
    } 
    set listFilter(value: string) { 
     this._listFilter = value; 
     this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products; 
    } 

    filteredProducts: IProduct[]; 
    products: IProduct[] = []; 

    constructor(private _productService: ProductService) { 

    } 

    performFilter(filterBy: string): IProduct[] { 
     filterBy = filterBy.toLocaleLowerCase(); 
     return this.products.filter((product: IProduct) => 
       product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1); 
    } 

    ngOnInit(): void { 
     this._productService.getProducts() 
       .subscribe(products => { 
        this.products = products; 
        this.filteredProducts = this.products; 
       }, 
        error => this.errorMessage = <any>error); 
    } 
}