Angular 动态 checkbox 绑定API数据后筛选功能失效问题求解

问题根因 #

你当前的筛选逻辑存在两处核心错误：

1. 混淆了Array.filter方法的用法：你直接给holder数组赋值了名为filter的自定义属性，没有调用数组自带的筛选方法，没有真正对数组内容做过滤，所以渲染的数据源没有变化。
2. 没有备份原始全量数据：如果直接修改存储接口返回值的holder变量，筛选一次后原始全量数据就会丢失，无法支持多次筛选或者清空筛选的场景。

修复步骤 #

1. 首先新增两个变量区分原始数据源和渲染用数据源：

// 存储接口返回的全量原始数据，永远不做修改，只作为筛选的基准
originalData: any[] = [];
// 存储筛选后的数据，直接用来渲染页面列表
holder: any[] = [];

2. 修改数据获取逻辑，给原始数据源做备份：

passData() {
    this.dataAPI().subscribe((res) => {
      this.originalData = res.data;
      // 初始状态下渲染全量数据
      this.holder = [...res.data];
      console.log(res);
      this.addCheckboxesToForm();
    });
}

3. 重写筛选逻辑，基于原始数据做过滤后赋值给渲染用变量：

applyFilter(event) {
    const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
    // 可根据实际需求调整匹配的字段，下方示例同时匹配姓名、邮箱
    this.holder = this.originalData.filter(item => 
      item.first_name.toLowerCase().includes(filterValue) ||
      item.last_name.toLowerCase().includes(filterValue) ||
      item.email.toLowerCase().includes(filterValue)
    );
    // 如果筛选后需要联动更新表单的复选框状态，可在此处补充对应逻辑
}

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