使用 angularfire 从 Firestore 过滤数据

Question

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

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

这里我有一个 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 服务中，有两种方法，一种是获取不带过滤器的集合，另一种是获取按给定 'categoria' 过滤的集合。

在您的组件中，当初始化（ngOnInit() 函数）时，您调用服务中的方法来检索整个集合；然后按钮 'Vehiculos' 使用您服务中给定的 'categoria' 触发函数 filtrarData()。

过滤后，如果您想 "clean" 过滤并取回整个集合，就像使用按钮调用一样简单，就像 ngOnInit() 正在做的那样那么你的数组 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>

顺便说一句，请注意 app.component.ts 中的 return 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)
}

使用 angularfire 从 Firestore 过滤数据

Filter data from Firestore whit angularfire

angularfire2

angular

google-cloud-firestore