为什么Ionic 4搜索栏删除输入内容后列表无法更新？

数据老陈

2026-9-30

问题根因

你当前代码的核心问题是每次过滤时直接覆盖了存储原始全量数据的carGroups数组，首次过滤后原始全量数据就永久丢失了，清空搜索词时无法恢复完整列表。

修复步骤

新增变量持久化存储原始全量数据
在ListViewPage类的属性定义部分新增一行，专门用来存储接口返回的所有车辆分组数据，后续过滤操作都不会修改这个变量的值：

allCarGroups: CarGroup[] = [];

修改接口请求的赋值逻辑
调整ngOnInit中接口请求的回调逻辑，把返回的全量数据同时赋值给原始数据存储变量和页面渲染用的列表变量：

this.listClientService.getAllCarGroupNamesWithId().subscribe(
  (response) => {
    this.allCarGroups = response;
    this.carGroups = [...response];
    return response;
  });

调整过滤逻辑，从原始全量数据中筛选
修改filterItems方法，所有过滤操作都从没有被修改过的allCarGroups中筛选，搜索词为空时直接返回全量数据：

filterItems(searchTerm: string) {
  // 搜索词为空时直接返回全量数据
  if (!searchTerm || searchTerm.trim() === '') {
    return [...this.allCarGroups];
  }
  return this.allCarGroups.filter(item => item.carGroupName.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1);
}