Фильтр ввода выбрать комбайн

Question

У меня есть эти два фильтра Firestore, каждый фильтр работает хорошо, но не зависит от другого.У меня вопрос, есть ли способ объединить их?

То есть, например, если я выберу фильтр по Categoría Я уважаювыберите Departmento, который я выбрал.

service.ts

filterByDepartamentos(departamento) {
  const byDepartamentos = this.afs.collection('eventos', ref => ref
  .where('departamento', '==', departamento)
  ).valueChanges();
  return byDepartamentos;
}

filterByCategorias(categoria) {
  const byCategorias = this.afs.collection('eventos', ref => ref
  .where('categoria', '==', categoria)
  ).valueChanges();

  return byCategorias;
}

component.ts

filtrarCategoria(categoria) {
  this.selectedCategoria = categoria;
  this.eventos = this.fs.filterByCategorias(categoria);
}

filtrarDepartamento(departamento) {
  this.selectedDepartamento = departamento;
  this.eventos = this.fs.filterByDepartamentos(departamento);
}

component.html

<div class="row">

  <mat-form-field appearance="outline" class="col-6">
    <mat-label>Departamento</mat-label>
    <mat-select [(ngModel)]="selectedDepartamento" (ngModelChange)="filtrarDepartamento(selectedDepartamento)">
      <mat-option *ngFor="let departamento of departamentos | async" [value]="departamento.nombre"> {{ departamento.nombre }}
      </mat-option>
    </mat-select>
    </mat-form-field>

  <mat-form-field appearance="outline" class="col-6">
    <mat-label>Categoría</mat-label>
    <mat-select [(ngModel)]="selectedCategoria" (ngModelChange)="filtrarCategoria(selectedCategoria)">
      <mat-option *ngFor="let categoria of categorias | async" [value]="categoria.nombre"> {{ categoria.nombre }}
       </mat-option>
      </mat-select>
     </mat-form-field>

   </div>

Answer 1

Вы можете объединить несколько запросов на равенство с Firestore.

Вот пример. Вы могли бы упростить это, если бы было только два фильтра - сделать две функции, где сначала вызывается Firestore с одним .where, другим с двумя .where, но это не будет хорошо масштабироваться, если вы добавите больше фильтров в будущем.

Компонент:

<mat-select [(ngModel)]="selectedCategoria" (ngModelChange)="filtrarBy('selectedDepartamento', selectedDepartamento)">
<mat-select [(ngModel)]="selectedCategoria" (ngModelChange)="filtrarBy('selectedCategoria', selectedCategoria)">

ngOnInit() {
  this.eventos = this.fs.eventos; // subscribe or use async pipe before ngModelChange fires
}

filtrarBy(key, type) {
  this.fs.filterBy(key, type);
}

Услуги:

private eventosSub = new Subject();
eventos = eventosSub.asObservable().pipe(
  scan((filters, filter) => {...filters, ...filter }, {}),
  switchMap(filters => {
    const byFilters = this.afs.collection('eventos', ref => {
      let queryRef: any = ref;
      for (let key in filters) {
        if (filters[key]) {
          queryRef = queryRef.where(Object.keys(filters[key])[0], '==', filters[key])
        }
      } 
      return queryRef;        
    }).valueChanges();

    return byFilters;
  })
)

filtrarBy(key, type) {
  this.eventos.next({[key]: type});
}

Это не проверено, только идея. Дайте мне знать, если есть