I am trying to make a TV Show Tracking application, with the help of checkbox I want the user to mark what episodes he/she watched. And I want with SQLite storage to save the checkboxes value and load them when the user opens the modal of that show.
With the functions I have, when I click a certain checkbox that episode is added to the array selected, let's say I add 3 episodes as watched and by mistake, I uncheck one of the three episodes, all of them are deleted from the array selected. I want to fix that, and also also to be able to save the "watched" episodes in the storage and get their values(watched-checked, not watched-unchecked) when the user opens the modal of that show.
The data that the API returns per season episodes it looks like this: Picture 1
Visual image: Picture 2
HTML:
<button ion-button color="dark" (click)="checkAll()">Mark all as watched</button>
<ion-item *ngFor="let episodes of seasonepisodes; let i = index;">
<ion-thumbnail style="width: 150px; height: 100px;" slot="start">
<img src="https://image.tmdb.org/t/p/w300">
</ion-thumbnail>
<ion-card-subtitle>Episode :
<br>
<br>
</ion-card-subtitle>
<ion-checkbox slot="end" color="dark" (ionChange)="selectMember(episodes)"
[(ngModel)]="episodes.checked"></ion-checkbox>
</ion-item>
TS:
seasonepisodes = null;
this.seasonepisodes = ((this.seasondetails || {}).episodes); (this gets only the episodes in particular season - it returns an array of objects(see Picture 1)
selected: any = [];
checkAll(){
for(let i =0; i <= this.seasonepisodes.length; i++) {
this.seasonepisodes[i].checked = true;
}
console.log(this.seasonepisodes);
}
selectEpisode(data){
if(data.checked == true) {
this.selected.push(data);
} else {
let newArray = this.selected.filter(function(el) {
return el.testID !== data.testID;
});
this.selected = newArray;
}
console.log(this.selected);
}
Thanks
Aucun commentaire:
Enregistrer un commentaire