使用 angularfire 过滤来自 Firestore 的数据 [英] Filter data from Firestore whit angularfire

问题描述

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

过滤和重置过滤器的正确方法是什么?

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

到目前为止我的代码:

service.ts

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

myComponent.ts

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

myComponent.html

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

解决方案

在您的 firebase 服务中，有两种方法，一种是获取没有过滤器的集合，另一种是获取按给定类别"过滤的集合.

在您的组件中，当被初始化(ngOnInit() 函数)时，您从服务调用该方法以检索整个集合；然后按钮Vehculos"使用来自您的服务的给定类别"触发函数 filtrarData().

过滤后，如果你想清理"过滤器并取回整个集合，就像让一个按钮调用与 ngOnInit() 正在做的一样简单然后你的数组 this.avisos 将再次拥有整个集合:

app.component.ts

 ngOnInit() {this.getAvios()}getAvisos() {this.avisos = this.fs.getDomiciliarios()}过滤数据(){this.avisos = this.fs.filterBy()}

然后在组件的 html app.component.html 中:

<button (click)="getAvisos()" class="btn btn-outline-primary btn-sm mx-1">清洁过滤器</button><span>过滤条件:</span><button (click)="filtrarData()" class="btn btn-outline-primary btn-sm mx-1">Vehículos</button><小时>

顺便说一句，注意没有必要在 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','==', categoryToFilter )).valueChanges()返回 this.avisos;};

所以现在在你的 app.component.html 中你可以有类似的东西:

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)}

I'm trying to filter data from Firestore with Angularfire's Querying Collection: https://github.com/angular/angularfire2/blob/master/docs/firestore/querying-collections.md I'm a bit confused with the approach. I have managed to filter through a button but I do not know how to reset or remove that filter once done.

What is the correct way to filter and reset said filter?

Here I have a stackblitz: https://stackblitz.com/edit/query-collections-in-angularfire2

My code so far:

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>

解决方案

In your firebase service, there are two methods, one to get the collection with no filters and one to get the collection filtered by a given 'categoria'.

In your component, when gets initialized (ngOnInit() function) you call the method from the service to retrieve the whole collection; and then the button 'Vehiculos' triggers the function filtrarData() with the given 'categoria' from your service.

After it has been filtered, if you want to "clean" the filter and get the whole collection back, it would be as easy as having a button calling the same as ngOnInit() is doing and then your array this.avisos would have again the whole collection:

app.component.ts

  ngOnInit() {
    this.getAvisos()
  }

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

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

then in the html of the component 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>

By the way, notice that there is no need to do the return this.avisos line in the app.component.ts, that would only be needed for the service.

Additionally, would be good if you standardise a bit the firebase.service function to get the collection filtered by 'categoria' with an argument, in case you want to call it for more than one type of 'categoria':

firebase.service.ts

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

    return this.avisos;
};

so now in your app.component.html you could have something like:

<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>

but take into account that your component app.component.ts would then include:

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

这篇关于使用 angularfire 过滤来自 Firestore 的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！