Angular中根据输入框值过滤数组项失效，求问题排查

你的代码无法正常过滤的核心问题有两个：

1. 用**严格相等===**做匹配，要求输入内容和标题完全一致（包括大小写、空格、完整长度），几乎无法触发有效过滤
2. 只要过滤结果为空就立刻还原为原数组，导致输入不匹配内容时，列表看起来完全没变化

修改后的代码 #

post-list.component.html

<input (input)="getPostByName($event)" class="form-control" type="text">

post-list.component.ts

export class PostsListComponent {
  posts!: Post[]
  filteredArray!: Post[];

  constructor(private postService: PostsService) {
    this.posts = this.postService.getAll();
    this.filteredArray = [...this.posts]; // 复制原数组，避免引用关联
  }

  getPostByName(event: Event) {
    const inputValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
    
    // 输入为空时还原全部列表
    if (!inputValue) {
      this.filteredArray = [...this.posts];
      return;
    }

    // 模糊匹配：忽略大小写，标题包含输入内容即匹配
    this.filteredArray = this.posts.filter(post => 
      post.title.toLowerCase().includes(inputValue)
    );
  }
}

关键修改说明 #

• 把keyup事件换成input：覆盖键盘输入、粘贴、输入法完成输入等所有输入场景，触发更精准
• 用toLowerCase()统一大小写+includes()做模糊匹配：不需要输入完整标题，只要包含关键词就能过滤，同时避免大小写敏感问题
• 调整空输入处理逻辑：只有输入框清空时才还原全部列表，过滤不到结果时保持空数组（可以根据需求添加"无匹配内容"的提示）
• 用[...this.posts]复制数组：避免原数组和过滤数组引用同一内存地址，防止意外修改原数据

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