angular - 如何使管道动态angular2

Question

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

我想使用filterByfrom 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. 如何在按钮单击时进行管道更新？我知道我可以绑定（单击）事件，但是我不太确定如何更新currentCategory（单击），这会提示管道再次过滤。

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

Answer 1

第一个。： 是的。

第二。：您应该导入pipe内部component并调用.transform()按钮(click) 事件。

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"...