如何在Ionic 4中结合Firestore实现搜索栏过滤与列表显隐控制

嘿，我看了你代码里的问题，主要是异步数据加载没处理好，再加上isResult的逻辑有点搞反了，咱们一步步来调整，帮你实现仅在搜索栏有输入时展示结果列表，清空输入时隐藏列表的需求：

首先，最核心的问题：异步数据加载导致过滤失效 #

你在initializeListSearch()里用了Firestore的get()方法，这是异步操作，但你直接在回调外面给this.listTitles赋值——这时候请求还没完成，getAllTitles还是空数组，自然过滤不出结果。咱们把这个方法改成异步的，确保数据加载完成后再赋值：

async initializeListSearch() {
  const getAllTitles = [];
  try {
    const querySnapshot = await firebase.firestore().collection("objs").get();
    querySnapshot.forEach(doc => {
      getAllTitles.push(doc.data().title);
    });
    this.listTitles = getAllTitles;
  } catch (error) {
    console.log("Error getting documents: ", error);
  }
}

然后在filter()方法里调用的时候，要加上await等待数据加载完成：

async filter(event) {
  await this.initializeListSearch();
  const search = event.target.value.trim();
  
  if (search) {
    // 有输入时过滤列表，并打开结果展示开关
    this.listTitles = this.listTitles.filter(title => 
      title.toLowerCase().includes(search.toLowerCase())
    );
    this.isResult = true;
  } else {
    // 输入清空时，关闭结果展示，恢复原始数据列表
    this.isResult = false;
    this.loadListobjs();
  }
}

然后是isResult的逻辑反转问题 #

你说HTML里设置的是isResult = false时显示列表，但你的需求是输入内容才展示结果，这逻辑完全反了。咱们调整一下：

• 把HTML里的*ngIf="!isResult"改成*ngIf="isResult"，这样只有isResult=true时才显示搜索结果列表；
• 同步调整代码里的赋值逻辑：输入有内容时设isResult=true，清空时设isResult=false。

优化：避免每次搜索都重复请求Firestore #

每次触发搜索都重新拉取所有标题太浪费资源了，咱们把标题列表缓存起来，页面初始化时只加载一次：

export class Tab1Page { 
  private objCollection: AngularFirestoreCollection 
  objs: Observable<any> 
  listTitles: any[] = []; // 用来缓存所有标题
  title 
  selectedTitle 
  isResult: boolean = false; 

  constructor(private af: AngularFirestore, private db: AngularFireDatabase, private service: objService) { 
    this.loadListobjs();
    this.initializeListSearch(); // 页面加载时就把标题列表缓存好
  } 

  // 只在初始化时执行一次的标题加载方法
  async initializeListSearch() {
    const getAllTitles = [];
    try {
      const querySnapshot = await firebase.firestore().collection("objs").get();
      querySnapshot.forEach(doc => {
        getAllTitles.push(doc.data().title);
      });
      this.listTitles = getAllTitles;
    } catch (error) {
      console.log("Error getting documents: ", error);
    }
  }

  filter(event) {
    const search = event.target.value.trim();
    const originalTitles = [...this.listTitles]; // 保存原始列表，方便清空搜索时恢复

    if (search) {
      this.listTitles = originalTitles.filter(title => 
        title.toLowerCase().includes(search.toLowerCase())
      );
      this.isResult = true;
    } else {
      this.isResult = false;
      this.listTitles = originalTitles; // 恢复原始标题列表
      this.loadListobjs();
    }
  }

  // 选择标题后的逻辑也调整下：选完后隐藏结果列表，显示对应的数据
  selectTitle(title) {
    this.selectedTitle = title;
    this.isResult = false;
    this.objs = this.af.collection('objs', ref => ref.where("title", "==", this.selectedTitle))
      .valueChanges();
  }

  // 原有的loadListobjs方法保持不变
  loadListobjs() {
    this.objCollection = this.af.collection('objs', ref => ref.orderBy('myorder', 'desc'));
    this.objs = this.objCollection
      .snapshotChanges().pipe(
        map(actions => actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        }))
      );
  } 
}

最后调整HTML模板 #

假设你的模板结构是这样，对应修改*ngIf的条件：

<!-- 搜索栏 -->
<ion-searchbar (ionInput)="filter($event)"></ion-searchbar>

<!-- 搜索结果列表：仅当isResult为true时显示 -->
<ion-list *ngIf="isResult">
  <ion-item *ngFor="let title of listTitles" (click)="selectTitle(title)">
    {{ title }}
  </ion-item>
</ion-list>

<!-- 原始数据列表：仅当isResult为false时显示 -->
<ion-list *ngIf="!isResult">
  <ion-item *ngFor="let obj of objs | async">
    {{ obj.title }}
  </ion-item>
</ion-list>

这样调整后，就能完美实现你要的效果：

• 输入搜索内容时，自动过滤并显示结果列表；
• 删除搜索内容到空时，隐藏结果列表，恢复显示完整的原始数据；
• 点击搜索结果里的标题后，隐藏列表，展示对应的数据项。

内容的提问来源于stack exchange，提问作者M. Mariscal