如何使用动态创建的复选框过滤数据？

这是我的代码：

    <div *ngFor="let product of products | mypipe : cb.checked : cb.value">
          <label>{{product.productName}} - {{product.productColor}}</label>
    </div>

    <!--<div *ngFor="let color of colors">-->
         <input #cb type="checkbox" [(ngModel)]="cb.checked" [value]="'Blue'" />
         <label>{{color}}</label>
    <!--</div>-->

它与注释的代码一起工作得很好，但如果我取消注释它，它就不起作用。 我的目标是动态创建多个复选框并过滤一些数据。 我可以仅使用手动创建的一个复选框（当代码被注释时）来完成此操作，但不能使用多个动态创建的复选框。

我希望能够很好地解释我的问题。

顺便说一句，这是我的管道代码：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'mypipe',
})

export class TestePipe implements PipeTransform {
  transform(value: any, args1?: any,args2?: any): any {
    return value.filter(product => {
      if (args1) {
        return product.productColor === args2;
      } 
      return value;
    });
  }
}