复选框过滤问题[角度]

Question

我制作了一个应用程序，一种出于学习目的的在线商店。我已经在product.component中显示了我的产品，如果它们与要拥有的产品匹配，则需要通过选定的复选框属性对其进行过滤。我设法应用了第一个管道，该管道按类别（单选）过滤产品，当我尝试使用多个选择按品牌过滤产品时出现了问题。我已经看到了几个类似于我的示例，但是在这里不起作用，并且我无法弄清楚如何正确制作第二个管道过滤器。

products.component.html：

    <div *ngFor="let brand of brandList" class="checkbox">
      <input type="checkbox" (click)="filterByBrand($event, brand)">
      <label class="">{{brand.name}}</label>
    </div>

    <div>
      <span *ngFor="let category of categoryList" class="category" (click)="filterByCategory(category)">{{category.name}}</span>
    </div>

<div class="card" style="width: 18rem;" *ngFor="let i = index; let product of productList| category : categoryChoice| brand: brandChoice">
        <img src="#" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">{{product.name}}</h5>
          <p class="card-text">Short descript: {{product.short_description}}</p>
          <p class="card-text">Full descript: {{product.full_description}}</p>
          <p class="card-text">Price: {{product.price}}</p>
          <p class="card-text">Brand: {{product.brand}}</p>
          <p class="card-text">Brand: {{product.category}}</p>
        </div>

如果使用复选框选择了品牌，则将其放入下面代码中所选品牌“ brandChoice”的数组中。 我跳过了ngOnInit（），因为除了产品，品牌和类别数组初始化外什么都没有。 products.component.ts：

export class ProductsComponent implements OnInit {
  productList: Array<IProduct>;
  brandList: Array<IBrand>;
  categoryList: Array<ICategory>;
  sizeList: Array<string>;
  categoryChoice: string;
  brandChoice: Array<IBrand>;
  constructor(private productService: ProductService, private brandService: BrandService, private categoryService: CategoryService) {
    this.categoryChoice = '';
    this.brandChoice = [];
  }

  public filterByCategory(category) {
    this.categoryChoice = category.name;
    console.log(category);
  }
  public filterByBrand(event, brand) {
    if (event.target.checked === true) {
      this.brandChoice.push(brand.name);
    } else {
      this.brandChoice.splice(this.brandChoice.indexOf(brand.name), 1);
    }
    console.log('brandChoice:', this.brandChoice);
  }
}

类别管道：

@Pipe({
  name: 'category'
})
export class CategoryPipe implements PipeTransform {

  transform(products: Array <any>, categoryName?: string): Array<any> {
    if (categoryName === '') {
      return products;
    }
    const sortedProducts = products.filter(product => product.category === categoryName);
    console.log(sortedProducts);
    return sortedProducts;
  }
}

品牌管道：

@Pipe({
  name: 'brand'
})
export class BrandPipe implements PipeTransform {
  transform(products: Array <any>, brandChoice: Array <any>): Array<any> {
    if (!brandChoice || brandChoice.length === 0) {
      return products;
    }
    return products.filter(product => brandChoice.includes(product.brand));
    }
  }

对象结构：

{
  "products": [
    {
      "id": 1,
      "name": "Product1",
      "short_description": "fdfdf",
      "full_description": "fdsfdsfdsfdsfs",
      "price": 10.2,
      "brand": "abibas",
      "category": "women"
    },
    {
      "id": 2,
      "name": "Product2",
      "short_description": "fdfdf",
      "full_description": "fdsfdsfdsfdsfs",
      "price": 20,
      "brand": "nike",
      "category": "man"
    },
    {
      "id": 3,
      "name": "Product3",
      "short_description": "fdfdf",
      "full_description": "fdsfdsfdsfdsfs",
      "price": 30,
      "brand": "new balance",
      "category": "children"
    },
    {
      "id": 4,
      "name": "Product4",
      "short_description": "fdfdf",
      "full_description": "fdsfdsfdsfdsfs",
      "price": 40,
      "brand": "puma",
      "category": "hot details"
    },
    {
      "id": 5,
      "name": "Product5",
      "short_description": "fdfdf",
      "full_description": "fdsfdsfdsfdsfs",
      "price": 10.2,
      "brand": "abibas",
      "category": "man"
    }
  ],
  "brands": [
    {
      "id": 1,
      "name": "abibas"
    },
    {
      "id": 2,
      "name": "nike"
    },
    {
      "id": 3,
      "name": "new balance"
    },
    {
      "id": 4,
      "name": "puma"
    }
  ],
  "categories": [
    {
      "id": 1,
      "name": "man"
    },
    {
      "id": 2,
      "name": "women"
    },
    {
      "id": 3,
      "name": "children"
    },
    {
      "id": 4,
      "name": "hot details"
    }
  ]
}