我有一個復選框串列設定，它將所選專案添加到一個陣列中，該陣列將其發送到服務。我有一個按鈕運行一個函式，該函式在單擊時清空陣列，但復選框保持選中狀態。
在這里，我選擇專案并出現紅色 X，單擊它會清除陣列。
這是我單擊 X 后，陣列清除，但專案保持選中狀態
頁面.ts
if (this.checkedItems.includes(item)) {
this.checkedItems = this.checkedItems.filter((value) => value != item);
} else {
this.checkedItems.push(item)
}
console.log(this.checkedItems);
}
createRoutine() {
this.workoutService.selectedWorkouts = this.checkedItems;
console.log(this.checkedItems);
}
uncheckAll(){
this.checkedItems = [];
}
頁面.html
<div>
<ion-searchbar placeholder="Search..." [(ngModel)]="filterTerm" animated="true"></ion-searchbar>
<ion-list class="accordion-list">
<ion-card size="full" >
<ion-card-header>
<ion-item class="workout-title">
<ion-card-title> Workouts</ion-card-title>
<a slot="end"><ion-icon name="close-outline" size="large" color="bic" *ngIf="checkedItems.length > 0" (click)="uncheckAll()"></ion-icon></a>
</ion-item>
</ion-card-header>
<ion-card-content>
<ion-list *ngFor="let workout of bic | filter:filterTerm | orderBy:'asc':'muscle'; let i = index;" class="workout-list" >
<ion-item>
<ion-label>{{workout.name}}</ion-label>
<ion-note>{{workout.muscle}}</ion-note>
<ion-checkbox slot="end" color="bic" (ionChange)="onChange(workout)"></ion-checkbox>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</ion-list>
</div>因此，我正在尋找有關如何uncheckAll()在清除陣列后取消選中復選框的事件的解決方案。
uj5u.com熱心網友回復：
您需要有一個[(ngModel)]復選框，它將保持復選框的選中狀態。這應該以workout節點為界。
我們可以將其標記[(ngModel)]="workout.isSelected"為例如。
內部uncheckAll回圈遍歷陣列bic并將isSelected每個節點的設定為false
偽代碼
模板
<ion-list *ngFor="let workout of bic | filter:filterTerm | orderBy:'asc':'muscle'; let i = index;" class="workout-list">
<ion-item>
<ion-label>{{workout.name}}</ion-label>
<ion-note>{{workout.muscle}}</ion-note>
<ion-checkbox
slot="end"
color="bic"
[(ngModel)]="workout.isSelected"
(ionChange)="onChange(workout)"></ion-checkbox>
</ion-item>
</ion-list>
組件.ts
uncheckAll(){
this.checkedItems = [];
this.bic.forEach(node => node.isSelected = false);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/326952.html