ng-multiselect-dropdown取消选中项后表格无法恢复初始状态问题

现有逻辑把数据库返回的原始全量数据、下拉框渲染数据源、表格最终展示数据三个不同用途的内容，全部挂载到同一个变量fullbatches上做读写操作，每次触发过滤时直接覆盖这个变量的内容，导致原始数据源被持续篡改：

• 第一次选中下拉项触发过滤时，fullbatches被替换为筛选后的子集，原本完整的原始数据直接丢失
• 后续用户取消选中、清空所有选择时，基于已经被修改过的残缺fullbatches做二次过滤，就会出现下拉选项被清空（显示「无可用数据」）、表格无内容渲染的异常

具体修复操作 #

• 拆分独立的原始数据存储
  在ngOnInit从数据库拿到返回数据的第一时间，新增一个不会被修改的只读变量originalFullBatches，把这份完整的原始数据存进去，后续所有筛选、取值操作都以这份数据为基准，全程不改动这个变量的内容
• 重写resetTable的过滤逻辑
  • 当selectedIds数组长度为0（也就是用户取消所有选中、清空了选择）时，直接把用于表格渲染、下拉展示的fullbatches赋值为originalFullBatches，让页面直接回到初始的完整状态
  • 当selectedIds有有效选中值时，从originalFullBatches中筛选出id和选中项匹配的数据子集，赋值给fullbatches作为最终的表格展示值
• 调整模板里的下拉组件绑定
  把ng-multiselect-dropdown的数据源属性[data]，从原来绑定的fullbatches改成originalFullBatches，从根源上避免展示值被修改后，下拉框没有可选数据的问题
• 适配各交互方法的取值逻辑
  onSelectAll方法在收集全量选中id的时候，统一从originalFullBatches里提取所有id，不要从已经被筛选过的fullbatches取值，避免全选的时候漏匹配数据；onItemSelect、onItemDeSelect修改selectedIds数组的原有逻辑不用改，改完选中数组之后调用修正好的resetTable就行

容易踩的坑 #

千万不要把下拉组件的数据源和表格过滤后的展示值做同个变量绑定，否则一旦过滤逻辑修改了展示值，下拉框的可选选项会跟着同步减少，多次操作后必然出现空选项、数据匹配不全的问题。

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