从Firestore Whitanglefire过滤数据 [英] Filter data from Firestore whit angularfire

问题描述

我正在尝试使用Angularfire的查询集合从Firestore过滤数据: 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>

解决方案

在您的Firebase服务中，有两种方法，一种是不使用过滤器获取集合，另一种是通过给定的类别"对集合进行过滤.

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

在过滤之后，如果您想清理"过滤器并收回整个集合，就可以像调用与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)
}

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

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