Ionic+Angular+Firebase搜索栏按Title过滤失效问题求助

我帮你排查了代码里的几个关键问题，调整后应该就能正常实现按title过滤列表的功能了：

1. 修复原始数据副本的引用问题 #

你在Firebase订阅里直接把grantsList赋值给loadedGrantsList，这是引用传递——两个变量指向同一个数组。当你过滤修改grantsList时，loadedGrantsList也会跟着变，导致initializeItems()根本没法恢复原始列表。

改成值复制，用扩展运算符创建新数组：

this.afdm.list('/grant').valueChanges().subscribe(grantsList => {
  this.grantsList = [...grantsList]; // 复制数组，避免引用共享
  this.loadedGrantsList = [...grantsList]; // 保存原始数据的独立副本
});

2. 优化搜索值的获取方式 #

evt.srcElement.value有时候会因为DOM结构变化出现异常，换成evt.target.value更稳定，同时加上trim()去掉输入的首尾空格：

const searchTerm = evt.target.value?.trim();

3. 完善过滤逻辑的边界处理 #

你的过滤逻辑里，如果某条数据没有title属性，会返回undefined导致意外行为，需要明确处理这种情况，同时简化匹配代码：

this.grantsList = this.loadedGrantsList.filter(currentGoal => {
  // 没有title的条目直接跳过
  if (!currentGoal.title) return false;
  // 不区分大小写匹配搜索关键词
  return currentGoal.title.toLowerCase().includes(searchTerm.toLowerCase());
});

4. 初始化数组避免undefined报错 #

在类里直接把数组初始化为空数组，避免模板渲染时因为grantsList未定义报错：

export class Tab1Page implements OnInit{
  public grantsList: any[] = [];
  public loadedGrantsList: any[] = [];
  // ... 其他代码
}

5. 可选：优化搜索栏输入体验 #

给搜索栏加上debounce属性，避免每输入一个字符就触发一次过滤，提升性能：

<ion-searchbar showcancelbutton="true" (ioninput)="filterList($event)" debounce="300"></ion-searchbar>

完整修正后的代码 #

TypeScript代码 #

export class Tab1Page implements OnInit{
  public grantsList: any[] = [];
  public loadedGrantsList: any[] = [];

  constructor(private dataService: DataService, public afdm: AngularFireDatabase ) { }

  ngOnInit(){
    this.afdm.list('/grant').valueChanges().subscribe(grantsList => {
      this.grantsList = [...grantsList];
      this.loadedGrantsList = [...grantsList];
    });
  }

  initializeItems(): void {
    // 从原始副本恢复完整列表
    this.grantsList = [...this.loadedGrantsList];
  }

  filterList(evt) {
    this.initializeItems();
    const searchTerm = evt.target.value?.trim();

    if (!searchTerm) {
      return;
    }

    this.grantsList = this.loadedGrantsList.filter(currentGoal => {
      if (!currentGoal.title) return false;
      return currentGoal.title.toLowerCase().includes(searchTerm.toLowerCase());
    });
  }
}

HTML视图代码 #

<ion-header>
  <ion-toolbar color="primary">
    <ion-title> Home </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-searchbar showcancelbutton="true" (ioninput)="filterList($event)" debounce="300"></ion-searchbar>
  <ion-list>
    <ion-item button *ngFor="let data of grantsList">
      <ion-label class="ion-text-wrap">
        <h3>{{data.title}}</h3>
        <p>Type: {{data.Category}}</p>
        <p>Deadline: {{data.Deadline}}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

这些修改核心是确保原始数据不被过滤操作污染，同时完善了事件处理和边界情况，应该就能正常触发过滤功能了。

内容的提问来源于stack exchange，提问作者Ahmed Sheikh