如何制作动态 Angular2 管道

我有以下 UI 按钮：
[显示全部] [类别 1] [类别 2]

我想用filterBy from ngx-pipes (https://github.com/danrevah/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 with currentCategory?

2. 如何在单击按钮时更新管道？我知道我可以绑定（点击）事件，但是我不太确定如何更新currentCategory尽管（单击）会提示管道再次过滤。

换句话说：使用按钮，我想根据匹配的属性更新显示的数据（按钮的值必须在对象的属性中）

1st.: Yes.

2nd.：您应该导入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"...