从Firestore Whitanglefire过滤数据

Question

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

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

在这里我有一个stackblitz： https ://stackblitz.com/edit/query-collections-in-angularfire2

到目前为止，我的代码：

服务

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()函数），您从服务中调用该方法以检索整个集合； 然后按钮“ Vehiculos”会从您的服务中使用给定的“类别”触发函数filtrarData() 。

过滤之后，如果您想“清理”过滤器并取回整个集合，就像按钮调用与ngOnInit()一样ngOnInit() ，然后您的数组this.avisos将再次this.avisos整个收藏：

app.component.ts

  ngOnInit() {
    this.getAvisos()
  }

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

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

然后在组件app.component.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.avisos中的this.avisos行，这仅是服务所需要的。

另外，如果您要对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;
};

所以现在在您的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)
}