Angular8响应式表单下对象数组对比及新旧值隔离需求

你遇到的核心问题其实是JavaScript中对象/数组的引用传递特性导致的：当你直接把this.agentDetailsList赋值给this.detailsToggle时，两者指向同一个内存地址，表单修改detailsToggle的同时，原数组agentDetailsList也会被同步修改，这就导致你没法准确对比新旧值的差异，进而无法正确控制保存功能的启用状态。

下面是具体的解决方案，分步骤帮你修复：

1. 深拷贝原数组，彻底切断引用绑定 #

在编辑模式下，不要直接赋值，而是对原数组进行深拷贝，让detailsToggle成为一个完全独立的新数组，和原数组互不影响。对于结构简单的对象，你可以用JSON.parse(JSON.stringify())快速实现深拷贝；如果是复杂对象（包含函数、Date等），可以考虑用Lodash的cloneDeep方法，或者自己实现深拷贝函数。

修改你settingsInfoForm()方法中的编辑逻辑：

// Edit
if (this.agentDetailsList) {
  // 深拷贝原数组，切断和原数组的引用绑定
  this.detailsToggle = JSON.parse(JSON.stringify(this.agentDetailsList));
  this.agentSettingsInfoForm = this.FB.group({
    agentToogles: this.FB.array([this.detailsToggle]),
  })
}

2. 修正对象数组的对比逻辑 #

你当前的objectsAreSame方法存在逻辑漏洞：

• 循环中重复赋值了len变量，会导致循环遍历异常
• 对比逻辑不严谨，只要找到第一个匹配项就直接返回，没有遍历完所有元素

这里给你一个更可靠的对比方法，先判断数组长度是否一致，再逐个对比对象的属性：

objectsAreSame(a1: any[], a2: any[]): boolean {
  // 先判断两个数组长度是否一致，长度不同直接返回false
  if (a1.length !== a2.length) return false;
  
  // 遍历每个元素，对比指定属性（这里假设是boolValue，你可以根据实际属性扩展）
  for (let i = 0; i < a1.length; i++) {
    // 可以根据需要添加更多属性的对比
    if (a1[i].boolValue !== a2[i].boolValue) {
      return false; // 只要有一个属性不同，就说明数组有变化
    }
  }
  return true; // 所有元素属性都相同，说明没有变化
}

3. 优化保存与状态判断逻辑 #

现在你可以用修正后的方法，准确对比原数组和修改后的数组，从而判断是否需要启用保存功能：

saveDetails() {
  const hasChanges = !this.objectsAreSame(this.agentDetailsList, this.detailsToggle);
  console.log('表单是否有修改:', hasChanges);
  console.log('原数组:', this.agentDetailsList);
  console.log('修改后的数组:', this.detailsToggle);
  
  // 如果有修改，执行保存逻辑
  if (hasChanges) {
    // 这里替换成你的保存API调用
    // this.authService.saveAgentDetails(this.detailsToggle);
  }
}

额外优化：实时监听表单变化 #

你已经在使用valueChanges监听表单变化，可以在回调中直接对比，实时更新保存按钮的启用状态：

const settingsInfoSub = this.agentSettingsInfoForm.valueChanges.subscribe(data => {
  // 对比原数组和表单当前值
  this.formEdit = !this.objectsAreSame(this.agentDetailsList, data.agentToogles[0]);
  console.log('是否可点击保存:', this.formEdit);
})

// 记得在组件销毁时取消订阅，避免内存泄漏
ngOnDestroy() {
  settingsInfoSub.unsubscribe();
}

这样就能彻底分离新旧值，准确判断表单是否有修改，完美实现你需要的保存功能控制逻辑。

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