Angular 角度多重复选框过滤器工作不正常

我已经创建了一个多角度复选框过滤器，它可以过滤产品列表。他们工作得很好，但他们是独立工作的。如前所述，我为输入框提供了不同的函数

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>

选择颜色

{{col.productColor}}
精选品牌

{{bar.brandName}}

类型脚本文件-

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);
}
 }

导出类ShopComponent实现OnInit{
产品清单：产品[]；
真人秀：牛仔裤[]；
productListShow=[]；
productListOriginal=[]；
productListNew=[]；
产品类别：字符串；
公共排序：任意[]=[
{type:“Popular”}，
{类型：“最畅销”}
];
公共颜色：任意[]=[
{
id:1，
productColor:“黑色”，
styleclass:'黑色'，
选择：false，
},
{
id:2，
productColor:“绿色”，
styleclass:'绿色'，
选择：false，
},
{
id:3，
productColor:“红色”，
styleclass:'红色'，
选择：false，
},
{
id:4，
productColor:“蓝色”，
styleclass:'蓝色'，
选择：false，
},
{
id:5，
productColor:“黄色”，
styleclass:'黄色'，
选择：false，
},
{
id:6，
productColor:“橙色”，
styleclass:'橙色'，
选择：false，
},
{
id:7，
productColor:“棕色”，
styleclass:'棕色'，
选择：false，
},
{
id:8，
productColor:“海军”，
styleclass:'海军'，
选择：false，
},
{
id:9，
productColor:“金色”，
styleclass:'gold'，
选择：false，
},
]
公共品牌：任何[]=[
{
id:1，
品牌名称：“品牌1”，
选择：false，
},
{
id:2，
品牌名称：“品牌2”，
选择：false，
},
]
构造函数（私有productservice:productservice，私有activatedRoute:activatedRoute）{}
恩戈尼尼特（）{
this.productList=this.productservice.getProducts（）；
this.productListShow=this.productList；
this.activatedRoute.params
.订阅（参数=>{
this.productCategory=params.type；
this.productListOriginal=this.productList.filter（product=>product.productCat.toLowerCase（）==this.productCategory.toLowerCase（））；
this.productListShow=this.productListOriginal；
}); 
}
公用筛选器产品（）：void{
常量filteredProductArray=新数组（）；
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=过滤子产品；
filteredProductArray.push（克隆产品）；
});
this.productListShow=filteredProductArray；
console.log（this.productListShow）；
}
公共筛选器品牌（）：无效{
常量filteredProductArray=新数组（）；
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=过滤子产品；
filteredProductArray.push（克隆产品）；
});
this.productListShow=filteredProductArray；
console.log（this.productListShow）；
}
}

---

我想将逻辑合并为一个逻辑，这样复选框就可以独立工作。例如，如果我选中品牌1，它将过滤所有品牌1产品，如果我选中绿色复选框，它将只过滤品牌1中的绿色产品，而不是所有产品。请帮助

您需要一系列产品，其中每种产品都有productColor和brandName。目前您有2个diff阵列，我看不到您的品牌名称与任何产品关联。不，该阵列用于与不同列表匹配的复选框，它们具有颜色和品牌名称