Как сделать трубу динамической angular2

Question

У меня есть следующие кнопки интерфейса:
[Показать все] [Категория 1] [Категория 2]

Я хотел бы использовать filterBy из ngx-pipes (https://github.com/danrevah/ngx-pipes), чтобы фильтровать данные.

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

Из документов, их пример: {{ users | filterBy: ['work.company']: 'Bar Tech' }}

1. Вместо 'Bar Tech' будучи 'жесткий кодированный' фильтр, я хотел бы назначить переменную 'currentCategory' вместо - как это сделать? Я просто заменяю Bar Tech на currentCategory?

2. Как сделать обновление трубы нажатием кнопки? Я понимаю, что могу связать событие (click), однако я не совсем уверен, как обновить currentCategory, хотя (щелчок), который заставит фильтр снова фильтровать.

Другими словами: Используя кнопки, я хотел бы обновить свои отображенные данные, основанные на свойстве соответствия (значение кнопки должно быть в свойстве объекта)

Answer 1

первым.: Да.

2-й.: Вы должны импортировать pipe в свой component и позвонить по телефону .transform() на кнопку (click)event.

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 
    ); 
    } 
} 

Не забудьте изменить исходный массив в вашем template, вы должны использовать:

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