lundi 30 décembre 2019

Set values on ionic checkbox and save the values in storage - Ionic 4

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