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