Comment puis-je faire une pipe angular2 dynamique

Question

je les boutons d'interface utilisateur suivants:
[Montrez Tous] [Catégorie 1] [Catégorie 2]

Je voudrais utiliser filterBy de ngx-pipes (https://github.com/danrevah/ngx-pipes) pour filtrer mon Les données.

Usage: array | filterBy: [prop, nested.prop, ...]: search: [strict | optional]

Des docs, leur exemple est: {{ users | filterBy: ['work.company']: 'Bar Tech' }}

1. au lieu de 'Bar Tech' étant un 'codé en dur' filtre, je voudrais assigner une variable 'currentCategory' au lieu - comment je fais ça? Est-ce que je remplace simplement Bar Tech par currentCategory?

2. Comment faire pour mettre à jour le tuyau sur un bouton? Je comprends que je peux lier un événement (clic), mais je ne suis pas tout à fait sûr comment mettre à jour currentCategory si le (clic) qui inciterait le tuyau à filtrer à nouveau.

En d'autres termes: à l'aide des boutons, je voudrais mettre à jour mes données affichées sur la base d'une propriété correspondant (la valeur du bouton doit être dans la propriété de l'objet)

Answer 1

1er.: Oui.

2ème.: Vous devez importer le pipe à l'intérieur de votre component et appeler .transform() sur le bouton (click)événement.

import { FilterByPipe } from 'ngx-pipes/src/app/pipes/array/filter-by'; 

@Component({ 
    // ... 
    providers: [FilterByPipe] 
}) 
export class AppComponent { 

    filteredArr: any[]; // your correct type 

    constructor(private readonly filterByPipe: FilterByPipe) { 
    // ... 
    this.filteredArr = this.users.slice(); // clone array by value (not by reference) 
    } 

    onClickBtn() { 
    this.filteredArr = this.filterByPipe.transform(
     this.users, 
     'work.company', 
     this.currentCategory 
    ); 
    } 
} 

N'oubliez pas de changer le tableau source dans votre template, vous devez utiliser:

*ngFor="let <variable> of filteredArr"...