Множественные фильтры по массиву объектов Angular 8

Question

Я хотел бы использовать несколько фильтров в своем проекте.

Я использую 3 фильтра: диапазон цен, тип, дата загрузки.

Uploaded_date: это флажок с тремя полями: Сегодня , Последние 2 дня, Последние 7 дней, Любые.

Тип: это флажок, имеющий три флажка: тип A, тип B, тип C.

Диапазон цен: диапазон чисел от 20 до 100.

Мои три фильтра должны работать одновременно с Agular (изменить) Метод. если я обновляю свой первый фильтр и обновляю следующий фильтр, фильтры должны применяться к результатам первого фильтра и тому подобное для остальных.

my stackblitz

Is есть способ заставить все мои фильтры работать вместе. для каждого фильтра, который я меняю. следующий должен применяться к предыдущему и так же для всех остальных.

Answer 1

Вы можете рассмотреть возможность использования rx js Observables и каналов для данных и фильтрации, что является обычным реактивным способом для go в Angular. https://stackblitz.com/edit/angular-vwtnmt?embed=1&file=src / app / app.component. html

  private data$ = new BehaviorSubject<Data[]>([]);
  dataWithFilters$: Observable<Data[]> = this.data$.pipe(
    this.vehicleTypeFilter,
    this.dateOptionsFilter,
    this.priceFilter
  );
  get vehicleTypeFilter() {...}
  get dateOptionsFilter() {...}
  get priceFilter() {...}

HTML:

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">titre</th>
            <th scope="col">price range</th>
            <th scope="col">date</th>
            <th scope="col">type</th>
        </tr>
    </thead>
    <tbody *ngFor="let data of (dataWithFilters$ | async)">
        <tr>
            <th scope="row">{{data.id }}</th>
            <td>{{data.titre }}</td>
            <td>{{data.price_range }}</td>
            <td>{{data.date | date: 'medium'}}</td>
            <td>{{data.type}}</td>
        </tr>
    </tbody>
</table>

Answer 2

Вместо использования нескольких условий if я предлагаю вам обновить ваш код следующим образом ( StackBlitz ).

vehiculeFilter: any[] = [];
postedWithinFilter: any[] = [];

Синхронизируйте c ваши фильтры с помощью массивы и оператор распространения:

onChangeUploadedDate($event, duration) {
    const checked = $event.target.checked;
    if(checked) {
      this.postedWithinFilter = [...this.postedWithinFilter, {...duration}];
    } else {
      this.postedWithinFilter = [...this.postedWithinFilter.filter(x => x.id !== duration.id)];
    }
  }

onChangeVehicule($event, vehiculeType) {
    const checked = $event.target.checked;
    if(checked) {
      this.vehiculeFilter = [...this.vehiculeFilter, {...vehiculeType}];
    } else {
      this.vehiculeFilter = [...this.vehiculeFilter.filter(x => x.id !== vehiculeType.id)];
    }
  }

затем используйте возможности геттеров и фильтр массива для синхронизации c ваш пользовательский интерфейс:

public get filteredData(): any[] {
    let filtered = [...this.datas];

    if(this.postedWithinFilter.length > 0) {
      filtered = filtered.filter(x => {
        const p = this.postedWithinFilter.find(v => {
          const d = new Date();
          d.setDate(d.getDate()-(v.value));
          const tDate = new Date(x.date);
          return tDate >= d;
        });
        return p != null;
      });
    }

    if(this.vehiculeFilter.length > 0 ) {
      filtered = filtered.filter(x => {
        const t = this.vehiculeFilter.find(v => v.name === x.type);
        return t != null;
      });
    }
    return filtered;
  }

все самое лучшее