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

Question

我正在尝试弄清楚如何使用 Angular 和 Pipes 构建产品的实时过滤器。在我的 html 中，我有这个产品循环:

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

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

更改过滤器中的内容

<input type="checkbox"> 

是否被选中。我该怎么做？

Answer 1

您也可以使用 typescript 代码来完成此操作。示例:

为此操作创建一个名为 products 和 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);
 }    
   }

在 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)">

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