如何使管道动态角度为2 [英] How do I make a pipe dynamic angular2

问题描述

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

I have the following UI buttons:
[Show All] [Category 1] [Category 2]

我想使用 ngx-pipes 中的 filterBy (

I would like to use filterBy from ngx-pipes (https://github.com/danrevah/ngx-pipes) to filter my data.

用法:数组|filterBy:[prop，nested.prop，...]:搜索:[严格|可选]

在文档中，其示例为: {{users |filterBy:['work.company']:'Bar Tech'}}

From the docs, their example is: {{ users | filterBy: ['work.company']: 'Bar Tech' }}

1. 我想分配一个变量"currentCategory"而不是"Bar Tech"作为硬编码"过滤器-我该怎么做?我是否只需将 Bar Tech 替换为 currentCategory ?

如何在单击按钮时更新管道?我知道我可以绑定(单击)事件，但是我不太确定如何通过(单击)提示提示管道再次过滤的方式更新 currentCategory .

How do I make the pipe update on button click? I understand I can bind a (click) event, however I am not quite sure how to update currentCategory though the (click) which would prompt the pipe to filter again.

换句话说:使用按钮，我想基于匹配的属性更新显示的数据(按钮的值必须在对象的属性中)

In other words: Using buttons, I would like to update my displayed data based on a matching property (button's value must be in object's property)

推荐答案

第一名.:是的.

第二个.:您应该在 component 内部导入 pipe 并在按钮上调用 .transform()(点击) 事件.

2nd.: You should import the pipe inside your component and call .transform() on button (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 中更改源数组，您应该使用:

Remember to change the source array in your template, you should use:

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

这篇关于如何使管道动态角度为2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！