角多个复选框过滤器无法正常工作

Question

我创建了一个多角度复选框过滤器，可以过滤产品列表。他们工作正常，但工作独立。作为，我给了输入框不同的功能。

HTML文件

    <div class="brand-select">
    <div class="brand-name">Select Color</div>
    <div class="brand-hr"><hr /></div>
    <form>
        <div class="form-check brand-checkbox" *ngFor="let col of colors;let index = index">
         <input class="form-check-input" 
             type="checkbox" 
             value="{{col.id}}" 
             id="{{col.id}}" 
             name="{{col.id}}" 
             [(ngModel)]="col.selected"
             (ngModelChange)="filterProducts()">

          <span class="checkmark {{col.styleclass}}">
            <i class="fa fa-check" aria-hidden="true"></i>
          </span>
          <label class="form-check-label" for="{{col.id}}">
            {{col.productColor}}
          </label>
        </div>
    </form>
</div>

<div class="brand-select">
    <div class="brand-name">Select Brand</div>
    <div class="brand-hr"><hr /></div>
    <form>
        <div class="form-check brand-checkbox brand-checkbox-sq" *ngFor="let bar of brands;let index = index">
         <input class="form-check-input" 
             type="checkbox" 
             value="{{bar.id}}" 
             id="{{bar.id}}" 
             name="{{bar.id}}" 
             [(ngModel)]="bar.selected"
             (ngModelChange)="filterBrands()">

          <span class="checkmark-brand">
            <i class="fa fa-check" aria-hidden="true"></i>
          </span>
          <label class="form-check-label" for="{{bar.id}}">
            {{bar.brandName}}
          </label>
        </div>
    </form>
</div>

打字稿文件-

export class ShopComponent implements OnInit {
productList: Products[];
jeansList: Jeans[];
productListShow = [];
productListOriginal = [];
productListNew = [];
productCategory: string; 
public sort: any[] = [
  {type: "Popular"},
  {type: "Best Selling"}
];
public colors: any[] = [
  {
    id: 1,
    productColor: "Black",
    styleclass: 'black',
    selected: false,
  },
  {
    id: 2,
    productColor: "Green",
    styleclass: 'green',
    selected: false,
  },
  {
    id: 3,
    productColor: "Red",
    styleclass: 'red',
    selected: false,
  },
  {
    id: 4,
    productColor: "Blue",
    styleclass: 'blue',
    selected: false,
  },
  {
    id: 5,
    productColor: "Yellow",
    styleclass: 'yellow',
    selected: false,
  },
  {
    id: 6,
    productColor: "Orange",
    styleclass: 'orange',
    selected: false,
  },
  {
    id: 7,
    productColor: "Brown",
    styleclass: 'brown',
    selected: false,
  },
  {
    id: 8,
    productColor: "Navy",
    styleclass: 'navy',
    selected: false,
  },
  {
    id: 9,
    productColor: "Gold",
    styleclass: 'gold',
    selected: false,
  },
]

public brands: any[] = [
  {
    id: 1,
    brandName: "Brand 1",
    selected: false,
  },
  {
    id: 2,
    brandName: "Brand 2",
    selected: false,
  },
]

constructor(private productservice: ProductService, private activatedRoute: ActivatedRoute) { }

ngOnInit() {
    this.productList = this.productservice.getProducts();
  this.productListShow = this.productList;
  this.activatedRoute.params
    .subscribe(params => {
      this.productCategory = params.type;
      this.productListOriginal = this.productList.filter(product => product.productCat.toLowerCase() == this.productCategory.toLowerCase());
      this.productListShow = this.productListOriginal;
    }); 

  }


public filterProducts(): void {
  const filteredProductArray = new Array<any>();
  const activeColors = this.colors.filter(c => c.selected).map(c => c.productColor);
  this.productListOriginal.forEach(prod => {
    const filteredSubProducts = prod.product.filter(p => activeColors.includes(p.productColor));
    const clonedProduct = Object.assign({}, prod);
    clonedProduct.product = filteredSubProducts;
    filteredProductArray.push(clonedProduct);
  });
  this.productListShow = filteredProductArray;
  console.log(this.productListShow);
}

public filterBrands(): void {
  const filteredProductArray = new Array<any>();
  const activeBrands = this.brands.filter(d => d.selected).map(d => d.brandName);
  this.productListOriginal.forEach(prod => {
    const filteredSubProducts = prod.product.filter(p => activeBrands.includes(p.companyName));
    const clonedProduct = Object.assign({}, prod);
    clonedProduct.product = filteredSubProducts;
    filteredProductArray.push(clonedProduct);
  });
  this.productListShow = filteredProductArray;
  console.log(this.productListShow);
}
 }

我想将逻辑合并为一个，因此复选框相互依赖。例如。如果我勾选“品牌1”，它将过滤所有品牌1的产品，如果我勾选“绿色复选框”，它将仅过滤品牌1的绿色产品，而不是全部。请帮助