Angular表格ID搜索过滤器如何实现Reset按钮重置功能

你现有过滤逻辑可正常运行，reset()方法只需要完成三个核心动作即可实现重置效果：清空搜索关键词、恢复全量表格数据、清空输入框显示内容，同时修正现有模板和过滤逻辑的小问题即可。 #

1. 补全reset方法代码 #

直接在component.ts中替换原有空的reset方法即可：

reset() {
  // 清空存储的搜索ID值
  this.valueId = null;
  // 把过滤后展示的列表重置为原始全量数据
  this.pFiltros = [...this.ids];
  // 手动清空输入框的显示内容（适配你当前keyup取值的写法）
  const searchInput = document.getElementById('idP') as HTMLInputElement;
  if (searchInput) searchInput.value = '';
}

2. 修复现有逻辑的兼容问题 #

模板侧修复 #

你当前的Clear按钮是submit类型，点击会先触发表单绑定的gFilter()提交逻辑，容易导致重置失效，把按钮类型改为button即可：

<input type="button" value="Clear" id="submit_button" (click)="reset()">

过滤逻辑优化 #

你当前的gFilter()是基于已过滤的pFiltros二次过滤，多次搜索会出现结果异常收窄的问题，建议每次过滤都从原始全量ids数组取值，优化后代码：

gFilter(){
  // 搜索词为空时直接返回全量数据
  if (!this.valueId?.trim()) {
    this.pFiltros = [...this.ids];
    return;
  }
  // 始终基于原始全量数据做过滤，避免多次搜索结果叠加错误
  this.pFiltros = this.ids.filter(x => 
    x.idP?.toString()?.includes(this.valueId.trim())
  );
}

可选优化（更符合Angular写法） #

如果后续要简化代码，可以把输入框改成双向绑定，省去手动操作DOM清空输入框的步骤：

• 模板中输入框加ngModel绑定：

  <input name="idP" id="idP" class="f-control" placeholder="Id" [(ngModel)]="valueId">
  

• 重置方法里可以删掉手动操作DOM清空输入框的代码，因为this.valueId = null会自动同步清空输入框内容。

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