Angular中keyup事件触发后数据筛选功能不生效问题求助

问题根源 #

1. 模板频繁触发无参调用：你在模板里写*ngFor="let student of filterStudent();"，Angular的变更检测会在每次事件（比如keyup、页面渲染）时都调用filterStudent()，而你没传参数，所以函数会使用默认值str=''，导致控制台不断输出空字符串。
2. keyup事件未更新筛选依赖：你在filterIt里调用filterStudent(event.value)只是计算了筛选结果，但没把输入值存到组件变量里，模板依然每次调用无参的filterStudent()，自然看不到筛选效果。

修复方案 #

核心是用组件变量存储输入框的筛选文本，让模板依赖这个变量进行筛选，避免无意义的重复调用：

修改后的组件代码

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <p>register works!</p>
    <input aria-label="filter text" (keyup)="filterIt($event)" type="text" />
    <div *ngFor="let student of filteredStudents; trackBy:identify">{{student}}</div>
  `,
})
export class App {
  students = ['Yamini', 'Surat', 'Arif', 'Madura'];
  filterText = '';

  // 用getter返回筛选结果，只有filterText变化时才重新计算
  get filteredStudents() {
    return this.students.filter((student) =>
      student.toLocaleLowerCase().includes(this.filterText.toLocaleLowerCase())
    );
  }

  filterIt($event: Event) {
    const event = $event.target as HTMLInputElement;
    // 更新筛选文本变量
    this.filterText = event.value;
  }

  identify(_index: number, name: string) {
    return name;
  }
}

bootstrapApplication(App);

优化点说明 #

• 新增filterText变量存储输入框的值，作为筛选的唯一依赖。
• 用getter属性filteredStudents返回筛选结果，Angular会在filterText变化时自动重新计算，避免不必要的重复执行。
• 模板直接绑定filteredStudents，不再直接调用函数，彻底解决控制台空字符串问题，同时筛选功能正常生效。

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