Angular表格PLAN过滤异常：清空输入后数据显示不全求助

问题现象 #

基于PLAN字段开发的Angular表格过滤功能出现异常：

• 输入值1执行过滤后清空输入，表格可正常显示全部4条记录；
• 输入值4执行过滤后清空输入，表格仅显示2条记录，不符合预期。

相关代码 #

todo.component.ts #

filterByPlan() {
    if (this.planFilter) {
      this.tarificationTitre = this.todoService.PLN_PLC.filter((item) => {
        return item.PLN_SVM.some((svm) => {
          return svm.PLN.some(
            (plan) => plan.PLAN === parseInt(this.planFilter)
          );
        });
      }).map((item) => {
        item.PLN_SVM = item.PLN_SVM.filter((svm) => {
          return svm.PLN.some(
            (plan) => plan.PLAN === parseInt(this.planFilter)
          );
        });
        return item;
      });
    } else {
      this.tarificationTitre = this.todoService.PLN_PLC;
    }
  }

todo.service.ts #

export class TodoService {
   PLN_PLC = [
      // 原数据数组结构
   ];
  constructor() {}
}

问题原因 #

代码直接修改了todoService.PLN_PLC数组内对象的PLN_SVM属性：

• map操作中item.PLN_SVM = item.PLN_SVM.filter(...)会篡改服务内的原始数据源；
• 输入4过滤时，原数据的部分PLN_SVM被删除，后续清空输入后，this.tarificationTitre = this.todoService.PLN_PLC拿到的是已修改的不完整数据；
• 输入1时，过滤后的PLN_SVM恰好与原数据一致，因此未暴露问题。

解决方案 #

操作数据时对原数据进行深拷贝，确保所有修改都在副本上进行，不影响原始数据源。修改后的filterByPlan方法如下：

filterByPlan() {
  if (this.planFilter) {
    const filterValue = parseInt(this.planFilter);
    // 深拷贝原数据，避免修改原始数据源
    this.tarificationTitre = JSON.parse(JSON.stringify(this.todoService.PLN_PLC))
      .filter((item) => {
        return item.PLN_SVM.some((svm) => {
          return svm.PLN.some((plan) => plan.PLAN === filterValue);
        });
      })
      .map((item) => {
        item.PLN_SVM = item.PLN_SVM.filter((svm) => {
          return svm.PLN.some((plan) => plan.PLAN === filterValue);
        });
        return item;
      });
  } else {
    // 清空过滤时返回原数据的深拷贝，确保拿到完整初始数据
    this.tarificationTitre = JSON.parse(JSON.stringify(this.todoService.PLN_PLC));
  }
}

补充说明 #

• 若数据结构包含函数、日期等JSON.parse/JSON.stringify无法正确处理的类型，可使用自定义深拷贝函数或第三方库（如lodash的cloneDeep）替代；
• 核心原则：不要直接修改服务中的原始数据源，操作副本保证数据的不可变性。

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