如何使用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)
})
}

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);
}

Answer 2

我试着理解你的代码，这对我来说有点困难，因为我也是Angular的新手。

角度中的反应形式是一个与可观察性一起工作的最佳概念。在检查FormGroups中的更改时，RxJs似乎是必不可少的：https://rxjs-dev.firebaseapp.com/api

从角度文档到可观测值：https://angular.io/guide/observables

我知道理解这些文档并不容易。

在代码中，我试图向您展示如何通过Formbuilder启动FormGroups，并听取表单中的更改。在subscription部分，您可以看到我与您的对象和控制台的loggig的比较。

我希望我能帮助你。欢迎在评论中提问。StackDemo：https://stackblitz.com/edit/angular-58vovb