如何创建带有多个4个或更多角度复选框的动态过滤器？

Question

我想使用多个复选框过滤数据。 我的代码在下面。

我正在跟踪发现的示例： https://codepen.io/magalhaespaulo/pen/jbYXPP

到目前为止，我已经设法通过以下类别获得数据过滤：

Component.html：

<menu class="box" *ngFor="let cats of categories">
    <h2>{{cats}}</h2>
    <div *ngFor="let value of getItems(cats,products)">
<input type="checkbox" [(ngModel)]="searchString"click)="filters(cats,value)" ng-model="value">
{{value}}
    </div>
</menu>

<article class="box">
    <h2>products</h2>
     <div *ngFor="let item of products ">
{{item.name}} ~ {{item.color}} ~ {{item.size}} ~ {{item.price}} ~ {{item.gener}}
     </div>
</article>

Component.ts：

products = [
{ name: 'Heathered flannel buffalo plaid shirt',
 color: 'red', size: 'small', price:49.95, gener: 'female' },
{ name: 'Flannel plaid shirt',
 color: 'yellow', size: 'medium', price:49.95, gener: 'male' },
{ name: 'Heathered oxford shirt (slim fit)',
 color: 'blue', size: 'large', price:49.95,  gener: 'male' },
{ name: 'Classic plaid oxford',
 color: 'green', size: 'small', price:49.95,  gener: 'male' },
{ name: 'Lived-in chambray shirt',
 color: 'purple', size: 'medium', price:39.95,  gener: 'male' }
]

 //With this code I obtain data acording to a category:

getItems(value, array) {
return (array || []).map(function (w) {
  return w[value];
}).filter(function (w, idx, arr) {
  if (typeof w === 'undefined') {
    return false;
  }
  return arr.indexOf(w) === idx;
});
}

我想要的结果就像我们在电子商务页面上使用的典型过滤器一样。在这种情况下，我有一个产品列表，其中包含：颜色，尺寸，价格和性别。

缺少的是单击类别时要过滤产品，但我不知道该怎么做。

在示例中，我发现使用管道，但不能一次应用于多个选项，而只能应用于特定选项（颜色，大小，性别或价格），但是我想使用一个或多个选项来应用过滤器。 / p>

我希望你能帮助我，