如何使用Angularfire筛选Firestore数据并重置筛选条件？

Hey，我看你已经实现了基础的Firestore筛选功能，现在卡在重置筛选上了对吧？我来给你调整下代码，同时理清楚正确的实现思路：

问题的关键在于把筛选条件做成可动态调整的变量，而不是每次筛选都直接写死固定条件。这样重置时只需要清空条件，重新获取全量数据即可。我们可以把数据查询逻辑统一封装，根据是否传入筛选条件来决定是否添加where子句。

1. 重构Firestore Service #

修改你的service.ts，把筛选逻辑改成可接受参数的统一方法，同时支持无参数时返回全量数据：

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class FirestoreService {
  constructor(private afs: AngularFirestore) {}

  // 统一获取数据的方法，支持可选的分类筛选参数
  getAvisos(categoria?: string): Observable<any[]> {
    return this.afs.collection('avisos', ref => {
      let query = ref;
      // 如果传入了分类参数，添加筛选条件
      if (categoria) {
        query = query.where('categoria', '==', categoria);
      }
      return query;
    }).valueChanges();
  }
}

2. 调整组件逻辑 #

在myComponent.ts中维护当前的筛选状态，同时添加重置方法：

import { Component } from '@angular/core';
import { FirestoreService } from './service';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  avisos: Observable<any[]>;
  // 记录当前的筛选分类，初始为null表示无筛选
  currentCategoria: string | null = null;

  constructor(private fs: FirestoreService) {
    // 组件初始化时先加载全量数据
    this.avisos = this.fs.getAvisos();
  }

  filtrarData(categoria: string) {
    this.currentCategoria = categoria;
    // 传入分类参数获取筛选后的数据
    this.avisos = this.fs.getAvisos(categoria);
  }

  resetFiltro() {
    this.currentCategoria = null;
    // 不传参数，重新获取全量数据
    this.avisos = this.fs.getAvisos();
  }
}

3. 更新模板添加重置按钮 #

修改myComponent.html，添加重置按钮，同时优化筛选按钮的参数传递（方便后续扩展更多筛选条件）：

<button (click)="filtrarData('Vehículos')" class="btn btn-outline-primary">Vehículos</button>
<button (click)="resetFiltro()" class="btn btn-outline-secondary ml-2">重置筛选</button>

• 统一的getAvisos方法避免了重复代码，同时让筛选逻辑更灵活，后续要加其他筛选条件（比如价格、时间）也能轻松扩展
• 通过currentCategoria变量跟踪当前筛选状态，不仅能实现重置，还能在模板中显示当前筛选状态（比如高亮选中的分类按钮）
• 重置本质就是清空筛选条件，重新发起无限制的查询，这也是Firestore查询的标准用法

内容的提问来源于stack exchange，提问作者Paco Zevallos