javascript - 如何使用反应形式使用angular8比较对象数组

Question

我使用了响应式表单，并且这些值被分配给了 html，而响应式表单是由对象数组引起的。因此，我在那里执行的任何操作都必须用于将对象与现有对象进行比较。所以我使用了一组对象比较方法。但是在这里，先前的值也绑定到已分配给表单的新值。

我希望新编辑的值和旧值分开，以便我可以比较对象属性值是否不同，然后我可以启用保存。

演示： 演示

TS：

saveDetails() {
 this.objectsAreSame(this.agentDetailsList, this.detailsToggle)
      console.log(this.agentDetailsList);
      console.log(this.detailsToggle);
      console.log(this.objectsAreSame,"this.objectsAreSame")
    }

      objectsAreSame(a1, a2) {
    for (var i = 0, len = a1.length; i < len; i++) {
      for (var j = 0, len = a2.length; j < len-1; j++) {
          if (a1[i].boolValue == a2[j].boolValue) {
              return false
          } else {
            return true
          }
      }
  }
}

形式：

  private settingsInfoForm() {
    if (!this.agentDetailsList) {
      // Add
      this.agentSettingsInfoForm = this.FB.group({

        agentToogles: this.FB.array([this.detailsToggle]),
      });
      // this.authService.setDetailsData(this.agentSettingsInfoForm);
    } else {
      // Edit
      if (this.agentDetailsList) {
       this.detailsToggle = this.agentDetailsList
       this.agentSettingsInfoForm = this.FB.group({
          agentToogles: this.FB.array([this.detailsToggle]),
      })
      }
        let settingsInfo = this.agentSettingsInfoForm.valueChanges.subscribe(data => {
          this.formEdit = true;
          console.log('agentSettingsInfoForm', this.formEdit)
        })
}

标签： javascriptangularangular-reactive-forms

Answer 1

您可以使用该Array.prototype.reduce函数来比较对象。它循环遍历第一个数组的所有元素，并从初始值 开始true。如果具有当前索引的项目存在于第二个数组中，则它返回所有先前比较和当前元素的重叠index。如果不存在，则返回 false。一旦一个值是false结果是false。

compare(
  array1.map(item => item.boolValue),
  array2.map(item => item.boolValue)
);

function compare(arr1: Array<boolean>, arr2: Array<boolean>) {
  return arr1.reduce((acc, cur, index) => acc && cur === arr2[index], true);
}