Angular: элементы массива не фильтруются

Мне нужна ваша помощь. С помощью двух разных вызовов API, я получаю массив из объектов: allProductList и allCategoriesList. Второй массив включает в себя категории, по которым я хочу фильтровать мои элементы с помощью checkboxes. С помощью кода ниже, у меня происходит фильтрация элементов, однако только по одной категории. Если выбрать 2 и более категории, то фильтровать будет только по-последней выбранной. Скажите, пожалуйста, как можно фильтровать мой массив по двум и более категориям и как возвращать начальный массив, если мы забрали все чебкокси? Спасибо вам большое

HTML

<div *ngFor="let category of allCategoriesList | async">
  <label>
    <h4> {{ category }} </h4>
    <input type="checkbox" [value]="category" (change)="filterProductsByCheckboxesValues($event)">
  </label>
</div>

<div *ngFor="let product of filteredProductList">
   <h4> {{ product.id }} + {{ product.title }} + {{ product.price }}</h4>
</div>

TypeScript

public allProductList: ProductModel[] = [];
public filteredProductList: ProductModel[] = [];
public allCategoriesList: Observable<string[]>;
public selectedCategoriesList: string[] = [];

ngOnInit() {
   this.productService.getAllProducts().subscribe(value => {
     this.allProductList = value;
     this.filteredProductList = value;
   });
   this.allCategoriesList = this.productService.getAllCategories();
}

public filterProductsByCheckboxesValues(event: Event): any {

let clonedArray = [...this.allProductList];

const isCheckboxChecked = (<HTMLInputElement>event.target).checked;
const checkboxDataValue = (<HTMLInputElement>event.target).value;

if (isCheckboxChecked) {
  if (!this.selectedCategoriesList.includes(checkboxDataValue)) {
    this.selectedCategoriesList.push(checkboxDataValue);
    this.selectedCategoriesList.forEach(category => {
      this.filteredProductList = this.allProductList.filter(el => el.category === category);
    })
  } else {
    return;
  }
} else {
  this.selectedCategoriesList = this.selectedCategoriesList.filter(category => category !== checkboxDataValue);
  if (!this.selectedCategoriesList.length) {
    this.filteredProductList = clonedArray;
  }
}

}

Ответы (0 шт):