搜索功能触发FormArray生成重复控件问题求助

问题背景 #

开发的列表组件通过async管道遍历列表Observable，新增名称过滤功能后，清空搜索值时FormArray出现重复控件，重置FormArray无法解决该问题。

复现步骤 #

• 在输入框中输入config
• 清空输入并点击保存按钮
• 控制台可观察到重复的FormArray值
• 打开演示组件的开发者工具，查看控制台中的FormArray内容

问题原因 #

核心原因是列表Observable更新时，FormArray的控件未被完全清空，或订阅逻辑重复触发控件添加操作。async管道每次接收新的列表值都会触发模板渲染，若FormArray的同步逻辑未严格匹配列表变化，就会导致重复添加控件。

解决方案 #

1. 彻底清空FormArray后重建 #

替代仅调用reset()的方式，直接清空控件集合再重新添加：

// 清空所有现有控件
this.formArray.clear();

// 遍历过滤后的列表，重新构建FormGroup并添加
filteredItems.forEach(item => {
  this.formArray.push(this.buildItemFormGroup(item));
});

2. 过滤重复的Observable值 #

给过滤后的列表Observable添加distinctUntilChanged操作符，避免相同列表值重复触发更新：

this.filteredItems$ = this.originalItems$.pipe(
  switchMap(items => this.searchTerm$.pipe(
    map(term => items.filter(item => item.name.includes(term))),
    // 对比前后列表是否一致，避免重复更新
    distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))
  ))
);

3. 严格同步列表与FormArray的订阅逻辑 #

确保每次列表更新时，FormArray的控件数量与列表项完全对应：

this.filteredItems$.subscribe(items => {
  this.formArray.clear();
  items.forEach(item => this.formArray.push(this.buildItemFormGroup(item)));
});

4. 统一管理FormArray控件 #

禁止子组件自行向FormArray添加控件，所有FormGroup的创建与添加逻辑由父组件统一处理，避免模板渲染时的重复操作。

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