使用 AngularFire 从 Firestore 过滤数据

我正在尝试使用 Angularfire 的查询集合从 Firestore 过滤数据：https://github.com/angular/angularfire2/blob/master/docs/firestore/querying-collections.md https://github.com/angular/angularfire2/blob/master/docs/firestore/querying-collections.md我对这种方法有点困惑。我已设法通过按钮进行过滤，但我不知道完成后如何重置或删除该过滤器。

过滤和重置所述过滤器的正确方法是什么？

这里我有一个堆栈闪电战：https://stackblitz.com/edit/query-collections-in-angularfire2 https://stackblitz.com/edit/query-collections-in-angularfire2

到目前为止我的代码：

服务.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>

在您的 Firebase 服务中，有两种方法，一种是获取不带过滤器的集合，另一种是获取按给定“类别”过滤的集合。

在您的组件中，当初始化时（ngOnInit()函数）您调用服务中的方法来检索整个集合；然后“Vehicles”按钮触发该功能filtrarData()与您的服务中给定的“类别”。

过滤后，如果您想“清理”过滤器并取回整个集合，那么就像使用一个按钮调用相同的按钮一样简单ngOnInit()正在做，然后你的数组this.avisos将再次拥有整个集合：

应用程序组件.ts

  ngOnInit() {
    this.getAvisos()
  }

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

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

然后在组件的html中应用程序组件.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.avisosapp.component.ts 中的行，仅服务需要该行。

此外，如果您对 firebase.service 函数进行一些标准化，以获得通过带有参数的“categoria”过滤的集合，以防万一您想为多种类型的“categoria”调用它，那就太好了：

firebase.service.ts

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

    return this.avisos;
};

所以现在在你的应用程序组件.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>

但要考虑到你的组件应用程序组件.ts那么将包括：

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