Question

我想使用复选框通过变量“类别”过滤JSON对象（产品）的列表。

关注的对象是

  {
  '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循环如下：

   <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

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

Answer 1

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

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

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

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复选框过滤器

1 个答案: