Question

我试图找出如何使用Angular和Pipes构建产品的实时过滤器。在我的HTML中，我有这个产品循环：

<div *ngFor="#product of products | filter">
    <div class="product">{{product.id}}</div>
</div>

似乎我可以通过输入filter：argument来为过滤器函数添加参数，我想知道如何在页面上添加包含输入字段值的参数。我想根据是否

更改过滤器中的内容

<input type="checkbox">

是否检查了

。我该怎么做？

Answer 1

您也可以使用打字稿代码执行此操作。例如：

为此操作创建一个名为products and method的空数组：

  products: any = [];

      onCheck(value){

    if(this.locations.includes(value) ){
        let index = this.locations.indexOf(value);
        this.locations.splice(index,1);
        console.log(this.locations);    
    }
 else{
    this.locations.push(value);
    console.log(this.locations);
 }    
   }

in html：

    <input type="checkbox" name="product" value="burger" #burger (change)="onCheck(burger.value)">

    <input type="checkbox" name="product" value="pizza" #pizza (change)="onCheck(pizza.value)">

尽管如此，它有点长，但它会使过滤工作变得容易

Answer 2

使用本地模板变量：

<input #ref type="checkbox">

将值传递给过滤器：

<div *ngFor="#product of products | filter: ref.checked">
    <div class="product">{{product.id}}</div>
</div>

Answer 3

使用NgModel传递绑定到复选框的组件属性：

@Pipe({name: 'filter'})
export class FilterPipe implements PipeTransform {
  transform(products, args:string[]) : any {
    return products.filter(product => {
      if(args[0]) {
        return product.id > 1;
      }
      return product.id;
    }
  }
}

@Component({
  selector: 'my-app',
  pipes: [FilterPipe],
  template: `
  <div *ngFor="#product of products | filter:enableFilter">
    <div class="product">{{product.id}}</div>
  </div>
  <input type="checkbox" [(ngModel)]="enableFilter"> enable filter
  <p>{{enableFilter}}`
})
export class AppComponent {
  enableFilter = false;
  products = [{id:1}, {id:2}, {id:3}];
  constructor() { console.clear(); }
}

Plunker

如果组件逻辑中没有任何东西需要知道复选框的值，我喜欢@ pixelbits的答案。

使用Angular 2中的管道来过滤复选框

3 个答案: