Angular 6复选框过滤器

问题描述

我想使用复选框通过变量类别"过滤JSON对象(产品)的列表.

I want to filter a list of JSON objects (Products) by the variable 'category' using a checkbox.

关注的对象是

  {
  'bikeId': 6,
  'bikeName': 'Kids blue bike',
  'bikeCode': 'KB-3075',
  'releaseDate': 'June 28, 2016',
  'description': 'Kids blue bike with stabalizers',
  'category': 'kids',
  'price': 290.00,
  'starRating': 4.8,
  'imageUrl': 'https://openclipart.org/image/2400px/svg_to_png/1772/bike-kid.png'
}

我当前的ngFor循环如下:

My current ngFor Loop is as followed:

   <tr *ngFor="let product of products">
                       <td><img *ngIf='showImage'
                         [src]='product.imageUrl'
                        [title]='product.bikeName'
                        [style.width.px]='imageWidth'></td>
                       <td>{{product.bikeName}}</td>
                       <td>{{product.bikeCode}}</td>
                       <td>{{product.releaseDate}}</td>
                           <td>{{product.price}}</td>
                           <td>{{product.starRating}}</td>
</tr>

我的当前复选框如下:

 <input type="checkbox" name="All" value="true" /> Mens
                <input type="checkbox" name="All" value="true" /> Womens
                <input type="checkbox" name="All" value="true" /> Kids

我问这个问题是因为我整天都在搜索论坛，但无济于事.一些答案确实可以解决问题，但是当我测试代码时，它要么已经过时，要么就无法正常工作.任何帮助，将不胜感激.

I ask this question because i have been searching forums all day to no avail. Some answers do answer it but when i test the code it's either outdated or just doesn't work. Any help would be appreciated.

推荐答案

您无法在线找到示例，因为有很多方法可以解决此问题，而我的回答只是一个.

Quite surprised you couldn't find an example online, as there are many ways to handle this problem and my answer is just one.

在此示例中，我保持产品来源不变，但创建第二个数组，其中将包含显示的产品.我将每个复选框绑定到过滤器模型的属性，并且当发生更改时，我调用filterChange()从该模型更新过滤后的产品数组.

In this example I keep the source of products untouched, but create a second array with that will contain the products displayed. I bind each checkbox to a property of a filter model and when a change occurs I call filterChange() to update my filtered products array from that model.

您不一定需要NgModel和两个绑定，并且您当然可以从数组中动态生成过滤器，随着应用程序的增长，这可能是一个好主意.您也可以使用Observables，或创建一个Pipe来过滤NgFor中的数组.真的，可能性是无止境的.

You don't necessarily need NgModel and two binding and you could certainly dynamically generate the filters from an array which would probably be a good idea as your application grows. You could also use Observables, or create a Pipe to filter the array in NgFor. Really the possibilities are endless.

MyComponent.ts

export class MyComponent {
  filter = { mens: true, womens: true, kids: true };
  products: Product[] = []
  filteredProducts = Product[] = [];

  filterChange() {
    this.filteredProducts = this.products.filter(x =>
       (x.category === 'kids' && this.filter.kids)
       || (x.category === 'mens' && this.filter.mens)
       || (x.category === 'womens' && this.filter.womens)
    );
  }
}

MyComponent.html

<tr *ngFor="let product of filteredProducts"> <!-- ... --> </tr>
<!-- ... --->
<input type="checkbox" [(ngModel)]="filter.mens" (ngModelChange)="filterChange()" /> Mens
<input type="checkbox" [(ngModel)]="filter.womens" (ngModelChange)="filterChange()" /> Womens
<input type="checkbox" [(ngModel)]="filter.kids" (ngModelChange)="filterChange()" /> Kids

这篇关于Angular 6复选框过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！