![](/img/trans.png)
[英]how to select and deselect checkbox using reactive forms in angular8
[英]How to compare array of objects using angular8 using reactive forms
我使用了反應形式,並且值被分配給了 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)
})
}
您可以使用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);
}
我試圖理解你的代碼,這對我來說有點困難,因為我對 Angular 也很陌生。
Angular 中的反應形式是一個與 observables 一起工作的最佳概念。 在檢查 FormGroups 中的更改時,RxJs 似乎是必不可少的: https ://rxjs-dev.firebaseapp.com/api
可觀察的角度文檔: https : //angular.io/guide/observables
我知道理解文檔並不容易。
在代碼中,我試圖向您展示如何通過 Formbuilder 啟動 FormGroups 並監聽表單中的更改。 在訂閱部分,您會看到我與您的對象的比較並將日志記錄到控制台。
我希望我能幫助你。 歡迎在評論中提問。 StackDemo: https ://stackblitz.com/edit/angular-58vovb
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.