Angular项目中搜索框无法正常过滤数据该如何解决？

你代码中存在3个核心错误导致过滤失效：

• 事件绑定不符合Angular语法，既没有指定事件触发时机，也没有用括号包裹事件绑定逻辑
• 模板中调用的方法名applyFilter和TS文件中实际定义的方法名filter不匹配
• 直接给myData赋值filter属性的逻辑错误，普通数组不存在该自定义属性，如果你用的是MatTable数据源，需要先声明为MatTableDataSource类型，如果是自定义数组需要主动调用过滤逻辑

修正步骤 #

1. 修正模板事件绑定 #

把input部分改为如下代码，绑定input事件触发过滤：

<form>
  <input type="text" name="search" placeholder="Search.." (input)="filter($event)">
</form>

你写的样式动效逻辑无需调整，可以正常生效。

2. 修正TS逻辑 #

情况A：使用Angular Material的mat-table组件

需要把myData声明为MatTableDataSource类型：

import { MatTableDataSource } from '@angular/material/table';

// 替换原来的public myData:any
public myData = new MatTableDataSource<any>([]); // 泛型可以替换为你实际的列表项类型

// 页面初始化、接口返回数据后给数据源赋值：
// this.myData.data = 你的接口返回数组

filter(event: Event) {
  const filterValue = (event.target as HTMLInputElement).value;
  this.myData.filter = filterValue.trim().toLowerCase();
}

情况B：用普通*ngFor渲染列表

需要自己实现数组过滤逻辑，保留原数组，维护一个过滤后的展示数组：

public originalData: any[] = []; // 存储原始完整数据
public showData: any[] = []; // 存储过滤后用来渲染的列表数据

// ngOnInit钩子或者接口请求完成后把原始数据赋值给展示数组
// this.showData = [...this.originalData]

filter(event: Event) {
  const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
  // 下方代码里的item.name可以替换为你实际要匹配的字段，多字段匹配用||拼接条件即可
  this.showData = this.originalData.filter(item => item.name.toLowerCase().includes(filterValue));
}

修改完成后，渲染列表的*ngFor要绑定showData而非原始数组。

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