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>

和我当前的复选框如下:

And My current Check boxes are as followed:

 <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 复选框过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！