我的 angular 應用程式中有多個復選框。當用戶選中和取消選中復選框時，我想將這些真/假值傳遞到陣列中。它發生在下面的代碼中。但是我的問題是，正如您在下面的 console.log 中看到的那樣，它具有重復的復選框值（索引 0 和 3 具有相同的內容）并將其推送到陣列。
我想知道如何檢查重復的物件并避免將物件推送到陣列。
.ts 檔案
layerChange(e:any){
var isChecked = e.target.checked;
var id = e.target.attributes.id.nodeValue;
const layer = {
isChecked: isChecked,
id: id,
}
this.layers.push(layer);
console.log(this.layers);
}
.html 檔案
<input id="population" (change)="layerChange($event)" type="checkbox">
<input id="gender" (change)="layerChange($event)" type="checkbox">
<input id="householdIncome" (change)="layerChange($event)" type="checkbox">
控制臺日志（this.layers）
**0: {isChecked: true, id: 'population'}**
1: {isChecked: true, id: 'age'}
2: {isChecked: false, id: 'population'}
**3: {isChecked: true, id: 'population'}**
uj5u.com熱心網友回復：
您可以首先使用以下任一方法檢查條目是否存在：
var id = e.target.attributes.id.nodeValue;
var attr = this.layer.find(x => x.id === id);
if(!attr)
this.layers.push(layer);
或者
this.layer.filter(x => x.id === id)
編輯
在您的場景中，最好在頁面加載中僅構造一次陣列。
ngOnInit(): void {
this.layer = [{id: 'age', isChecked: false}, {id:'population',isChecked: false}]
}
然后在用戶選中/取消選中時更改選中狀態：-
layerChange(e:any){
var isChecked = e.target.checked;
var id = e.target.attributes.id.nodeValue;
this.layer.find(x => x.id === id).isChecked = isChecked;
console.log(this.layers);
}
uj5u.com熱心網友回復：
您可以創建一個僅包含 id 的字串陣列，您可以根據選擇從陣列中插入或洗掉元素
layerChange(e:any) {
const id = e.target.attributes.id.nodeValue;
const index = this.layers.findIndex(el => el === id)
if(index === -1) {
this.layers.push(id);
} else {
this.layers.splice(index, 1)
}
console.log(this.layers);
}
uj5u.com熱心網友回復：
天哪！
Kalana（和其他人）我們需要使用“變數”重新思考這個問題。是的，Angular 哲學是系結變數。.ts 中的變數使值顯示在 .html 中
所以，一些簡單的比如在 .ts 中宣告一個物件陣列
layers:any[]=[{isChecked: true, id: 'population'},
{isChecked: true, id: 'age'},
{isChecked: false, id: 'population'}
]
允許我們用 .html 撰寫
<ng-container *ngFor="let layer in layers">
<input type="checkbox" [(ngModel)]="layer.isChecked"
(change)="onChange()">
</ng-container>
在 .ts 中有一個函式：
onChange(){
console.log(this.layers)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/382270.html
上一篇：Numpy錯誤識別資料型別