Фильтровать список с помощью флажков в Angular 6 - PullRequest
Новая
       14

Фильтровать список с помощью флажков в Angular 6

0 голосов
/ 24 апреля 2019

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

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

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

1 Ответ

0 голосов
/ 24 апреля 2019

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

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

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

...