Фильтровать данные из Firestore с помощью angularfire

Question

Я пытаюсь отфильтровать данные из Firestore с помощью коллекции запросов Angularfire: https://github.com/angular/angularfire2/blob/master/docs/firestore/querying-collections.md Я немного запутался с подходом.Мне удалось отфильтровать через кнопку, но я не знаю, как сбросить или удалить этот фильтр после того, как это сделано.

Как правильно отфильтровать и сбросить указанный фильтр?

Здесь у меня естьa stackblitz: https://stackblitz.com/edit/query-collections-in-angularfire2

Мой код пока:

service.ts

filterBy() {
  this.avisos = this.afs.collection('avisos', ref => ref.where('categoria','==', 'Vehículos' )).valueChanges()
  return this.avisos;
};

myComponent.ts

filtrarData() {
  this.avisos = this.fs.filterBy()
  return this.avisos;
};

myComponent.html

<button (click)="filtrarData()" class="btn btn-outline-primary">Vehículos</button>

Answer 1

В вашей службе Firebase есть два метода: один для получения коллекции без фильтров и один для фильтрации коллекции по заданной категории.

В вашем компоненте при инициализации (функция ngOnInit()) вы вызываете метод из службы для получения всей коллекции;а затем кнопка «АВТОМОБИЛЬ» запускает функцию filtrarData() с указанными категориями из вашего сервиса.

После того, как он был отфильтрован, если вы хотите «очистить» фильтр и вернуть всю коллекцию обратно, это было бы так же просто, как если бы кнопка вызывала то же, что и ngOnInit(), и тогда ваш массив this.avisos снова получил бы всю коллекцию:

app.component.ts

  ngOnInit() {
    this.getAvisos()
  }

  getAvisos() {
      this.avisos = this.fs.getDomiciliarios()
  }

  filtrarData() {
      this.avisos = this.fs.filterBy()
  }

, затем в html-компоненте app.component.html :

<button (click)="getAvisos()" class="btn btn-outline-primary btn-sm mx-1">Clean Filters</button>
<span>Filter by:</span>
<button (click)="filtrarData()" class="btn btn-outline-primary btn-sm mx-1">Vehículos</button>
<hr>

Кстати, обратите внимание, что нет необходимости делатьreturn this.avisos строка в app.component.ts, которая понадобится только для службы.

Кроме того, было бы неплохо, если бы вы немного стандартизировали функцию firebase.service, чтобы фильтровать коллекцию по категориям'с аргументом, если вы хотите вызвать его для более чем одного типа' категорий ':

firebase.service.ts

filterBy(categoriaToFilter: string) {
    this.avisos = this.afs.collection('avisos', ref => ref.where('categoria','==', categoriaToFilter )).valueChanges()

    return this.avisos;
};

, так что теперьв вашем app.component.html вы можете получить что-то вроде:

<button (click)="filtrarData('Vehículos')" class="btn btn-outline-primary btn-sm mx-1">Vehículos</button>

<button (click)="filtrarData('Casa')" class="btn btn-outline-primary btn-sm mx-1">Casa</button>

, но учтите, что ваш компонент app.component.ts будет содержать:

filtrarData(categoriaToFilter: string) {
    this.avisos = this.fs.filterBy(categoriaToFilter)
}