Блог

у меня есть множество ресторанов

  restaurants=[
{ restname: "rest1", isDelivery: true, isItalian:false, isBreakfast:true},
{ restname: "rest2", isDelivery: false, isItalian:true, isBreakfast:true},
{ restname: "rest3", isDelivery: true, isItalian:false,isBreakfast:false}]
  

и я показываю их с помощью * ngFor, например :

  <div *ngFor="let rest of restaurants" >
 <p> {{rest.restname}} <p>
  

а также иметь список флажков, который предназначен для фильтрации ресторанов по категориям :

  <p *ngFor="let cat of categories">
  <input type="checkbox" [(ngModel)]="cat.checked" > {{cat.cat}}
</p>
  

.ts

  categories=[
{ cat: "Delivery", checked: false},
{ cat: "Italian Food", checked: false},
{ cat: "Breakfast Service", checked: false}]
  

мой главный вопрос заключается в том, как создать канал для фильтрации ресторанов по одной или нескольким категориям с выбором флажка?

Вы можете использовать функцию в своем компоненте для выполнения фильтрации:

 <div *ngFor="let rest of getFilteredRestaurants()" >
 <p> {{rest.restname}} <p>
  

 public getFilteredRestaurants() {
  return this.restaurants.filter(r => this.isRestaurantVisible(r));
}

private isRestaurantVisible(restaurant: Restaurant) {
  const validCategories = this.categories.filter(c => c.checked).map(c => {
    switch(c.cat) {
      case 'Delivery': return 'isDelivery';
      case 'Italian Food': return 'isItalian';
      case 'Breakfast Service': return 'isBreakfast';
      default: return null;
    }
  });

  return validCategories.some(c => restaurant[c] === true);
}
  

Обратите внимание, что это может вызвать проблемы с производительностью, поскольку эти вычисления будут выполняться в каждом цикле обнаружения изменений — возможно, вы захотите реализовать некоторую форму кэширования.