Angular过滤异常：输入框为空时无法恢复原始数据

你每次执行applyFilter时，都会把this._todayShare替换成过滤后的filteredMap，直接覆盖了原始数据。等输入框清空时，已经找不到完整的原始数据来恢复全量结果了。

核心思路是保留原始数据副本，每次过滤都基于原始数据操作，绝不修改原始数据本身。

修改后的TypeScript代码 #

// 新增变量专门存原始数据
private originalTodayShare: Map<string, any>;

// 组件初始化时（比如ngOnInit里）保存原始数据
ngOnInit(): void {
  // 这里写你原本初始化_todayShare的逻辑，比如从接口拿数据或者本地定义
  this._todayShare = new Map(...); 
  // 复制一份原始数据存起来，后续过滤都用这个副本当数据源
  this.originalTodayShare = new Map(this._todayShare);
}

applyFilter(value: string) {
  const filterValue = value.trim().toLowerCase();
  const filteredMap = new Map<string, any>();

  // 基于原始数据副本做过滤，不再动原来的_todayShare
  this.originalTodayShare.forEach((item, key) => {
    if (key.toLowerCase().includes(filterValue) ||
      JSON.stringify(item).toLowerCase().includes(filterValue)) {
      filteredMap.set(key, item);
    }
  });

  this._todayShare = filteredMap;
}

额外优化点 #

• 空值快速处理：如果输入框清空，直接把_todayShare设为原始数据副本，不用走循环过滤，节省性能：

applyFilter(value: string) {
  const filterValue = value.trim().toLowerCase();
  
  if (!filterValue) {
    this._todayShare = new Map(this.originalTodayShare);
    return;
  }

  const filteredMap = new Map<string, any>();
  this.originalTodayShare.forEach((item, key) => {
    if (key.toLowerCase().includes(filterValue) ||
      JSON.stringify(item).toLowerCase().includes(filterValue)) {
      filteredMap.set(key, item);
    }
  });

  this._todayShare = filteredMap;
}

• 优化对象匹配性能：如果item的结构是已知的，别用JSON.stringify转成字符串匹配，直接遍历item的具体属性（比如item.name、item.id）来判断，能避免不必要的性能开销。

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