Ionic toggle to store in native

Ionic Framework ionic-v3
1

In my ionic project, users can add flights to “my flights” list (like my favorites)… i use toggle button to add the item to “my flights”.When i add a item to “my flight” by toggling(checked true).the item saved to native storage . but the item toggle remain still as unchecked (if the item once added to "my flight " the toggle button remains still as checked(true) or unchecked: that’s the logic).


<ion-toggle [(ngModel)]="item.idcheckarvl"  (ionChange)="updateItemarrivals(item.idcheckarvl)" style="padding:5px;float: right"></ion-toggle>


 getDataFromStorage(flightid)
  {
    this.nativeStorage.getItem('arrivaldetails')
      .then(
        data =>{
          this.idArray=data.id;
          this.myflightDetailsArray=data.fligtdetails;
          this.arrivaltimeArray=data.arrivaltime;
          this.departureArray=data.departuretime;
          this.airlinename_array=data.airline;
          this.arrival_airport_array=data.arrival_airport;
          this.departure_airport_array=data.departure_airport
          for(let i=0;i<this.idArray.length;++i)
          {
            if (this.idArray[i]==flightid){
              this.item.idcheckarvl = true;
   //          this.idcheckarvl=true;
              alert("itm.check "+this.item.idcheckarvl)
              break;
            }
            else
              this.item.idcheckarvl = false;
          }
        },
        error => console.error(error)
      );

  }
2

i think you write incorrect spell at ioncahge event => item.idcheckarvl

3

sorry actually it’s correct in my code

4

ok thats fine.
can you show the code where you update your localstorage on toggle change ?

5 
 updateItemarrivals(events, items,flightid,arvltime,dprttime,airline_name,arrival_fs,departure_fs,arrival_city,departure_city,status)
  {

    if(events){
     this.myflightDetailsArray.push(items);
      this.arrivaltimeArray.push(arvltime);
      this.departureArray.push(dprttime);
      this.idArray.push(flightid);
      this.airlinename_array.push(airline_name);
      this.arrival_airport_array.push(arrival_fs);
      this.departure_airport_array.push(departure_fs);
      this.city_arrival_array.push(arrival_city);
      this.city_departure_array.push(departure_city);
      this.status_array.push(status)
     this.nativeStorage.setItem('arrivaldetails', {fligtdetails: this.myflightDetailsArray,arrivaltime:this.arrivaltimeArray,departuretime:this.departureArray,id:this.idArray,airline:this.airlinename_array,departure_airport:this.departure_airport_array,arrival_airport:this.arrival_airport_array
      ,status:this.status_array,arrival_location:this.city_arrival_array,departure_location:this.city_departure_array})
        .then(
          () => console.log('Stored item!'),
          error => console.error('Error storing item', error)
        );
    }
    else {
      this.idArray.splice(this.currentIndex,1);
      this.myflightDetailsArray.splice(this.currentIndex,1);
      this.arrivaltimeArray.splice(this.currentIndex,1);
      this.departureArray.splice(this.currentIndex,1);
      this.airlinename_array.splice(this.currentIndex,1);
      this.arrival_airport_array.splice(this.currentIndex,1);
      this.departure_airport_array.splice(this.currentIndex,1);
      this.city_arrival_array.splice(this.currentIndex,1);
      this.city_departure_array.splice(this.currentIndex,1);
      this.status_array.splice(this.currentIndex,1);
      this.nativeStorage.setItem('arrivaldetails', {fligtdetails: this.myflightDetailsArray,arrivaltime:this.arrivaltimeArray,departuretime:this.departureArray,id:this.idArray,airline:this.airlinename_array,departure_airport:this.departure_airport_array,arrival_airport:this.arrival_airport_array
        ,status:this.status_array,arrival_location:this.city_arrival_array,departure_location:this.city_departure_array})
        .then(
          () => console.log('Stored item!'),
          error => console.error('Error storing item', error)
        );
    }
  }
6

where you set this variable in your localstorage ?

7

That’s not set in local storage. i set it as a variable
idcheckarvl:boolean=false;

8

ok ok
as i understand you have multiple toggle in your form right ?

9

yes, toggle in a loop

<ion-card *ngFor= "let item of objectData;let k=index;" >
    <ion-card-content >
     
      <div class="row" >
        <div class="col" >Add to My Flights</div>
        <div class="col"><ion-toggle [(ngModel)]="item.idcheckarvl"  (ionChange)="updateItemarrivals(item.idcheckarvl,item,item.flightId,item.arrivalDate.dateLocal,item.departureDate.dateLocal,airline_name,item.arrivalAirportFsCode,item.departureAirportFsCode,arrivalairportcity,departureairportcity,item.status)" style="padding:5px;float: right"></ion-toggle></div>

      </div>

</ion-card-content>
10

that is the issue! you have to make an array for every toggle to get/set true/false
here model can not find the exact toggle to display true because every toggle has same model

11

can you just explain the code

12

this way you can create array
[(ngModel)]="item[k].idcheckarvl"

and in your for loop

this.item[i].idcheckarvl = true;

13

when i try this it shows error:
asfsfs

14

ok make a array variable in your ts file
then assign that variable as model in toggle tag such as

[(ngModel)]="idcheckarvl[k]"

15

this error arise because item.idcheckarvl property not found which is true

16

when i try this the toggle is displayed still as checked only when i still in same page.
after going to another page , then i return the same page it still as unchecked

17

call this function to referesh your screen

18

i have done it already

19

my full code:

 ionViewDidLoad() {
    console.log('ionViewDidLoad ArrivalsPage');
    this.get_arrivalflights() ;
  }
  showmore(k,flightcode,arrivalairportcode,departureairportcode,flightid)
  {
    this.getAirlileName(flightcode)
    this.getArrivalAirportCiy(arrivalairportcode);
    this.getDepartureAirportCiy(departureairportcode)
    this.getDataFromStorage(flightid)

    document.getElementById(k).style.display = 'none';
    document.getElementById(k+"second").style.display = 'block';
  }
  showless(k)
  {
    document.getElementById(k+"second").style.display = 'none';
    document.getElementById(k).style.display = 'block';
  }
  updateItemarrivals(events_node, items,flightid,arvltime,dprttime,airline_name,arrival_fs,departure_fs,arrival_city,departure_city,status)
  {
//   this.ass.asd();
    alert(events_node)
    if(events_node){
      // alert("before")
      // alert("id :"+this.idArray+"  airline  :"+this.airlinename_array+"  time :"+this.arrivaltimeArray)
      this.myflightDetailsArray.push(items);
      this.arrivaltimeArray.push(arvltime);
      this.departureArray.push(dprttime);
      this.idArray.push(flightid);
      this.airlinename_array.push(airline_name);
      this.arrival_airport_array.push(arrival_fs);
      this.departure_airport_array.push(departure_fs);
      this.city_arrival_array.push(arrival_city);
      this.city_departure_array.push(departure_city);
      this.status_array.push(status)
      // alert("after")
      // alert("id :"+this.idArray+"  airline  :"+this.airlinename_array+"  time :"+this.arrivaltimeArray)
      this.nativeStorage.setItem('arrivaldetails', {fligtdetails: this.myflightDetailsArray,arrivaltime:this.arrivaltimeArray,departuretime:this.departureArray,id:this.idArray,airline:this.airlinename_array,departure_airport:this.departure_airport_array,arrival_airport:this.arrival_airport_array
      ,status:this.status_array,arrival_location:this.city_arrival_array,departure_location:this.city_departure_array})
        .then(
          () => console.log('Stored item!'),
          error => console.error('Error storing item', error)
        );
    }
    else {
      this.idArray.splice(this.currentIndex,1);
      this.myflightDetailsArray.splice(this.currentIndex,1);
      this.arrivaltimeArray.splice(this.currentIndex,1);
      this.departureArray.splice(this.currentIndex,1);
      this.airlinename_array.splice(this.currentIndex,1);
      this.arrival_airport_array.splice(this.currentIndex,1);
      this.departure_airport_array.splice(this.currentIndex,1);
      this.city_arrival_array.splice(this.currentIndex,1);
      this.city_departure_array.splice(this.currentIndex,1);
      this.status_array.splice(this.currentIndex,1);
      this.nativeStorage.setItem('arrivaldetails', {fligtdetails: this.myflightDetailsArray,arrivaltime:this.arrivaltimeArray,departuretime:this.departureArray,id:this.idArray,airline:this.airlinename_array,departure_airport:this.departure_airport_array,arrival_airport:this.arrival_airport_array
        ,status:this.status_array,arrival_location:this.city_arrival_array,departure_location:this.city_departure_array})
        .then(
          () => console.log('Stored item!'),
          error => console.error('Error storing item', error)
        );
    }
  }

  get_arrivalflights() {

    var communicationParams = {
      showLoader: true,
      reqUrl: "",
      reqBody: {},
      callBackSuccess: (response) => {
        console.log(response);
        this.objectData = response.flightStatuses;
        //console.log(this.objectData)
      },
      callBackFailure: (response) => { console.log("failure dude"); console.log(response); }
    };
    this.restservice.makeGetRequest(communicationParams);
  }

  getAirlileName(flightcode)
  {
    var communicationParams = {
      showLoader: true,
      reqUrl: "",
      reqBody: {},
      callBackSuccess: (response) => {
        this.airline_name=response.airline.name;
           // console.log(response.airline.name)
      },
      callBackFailure: (response) => { console.log("failure dude"); console.log(response); }
    };
    this.restservice.airlineNameRequest(communicationParams,flightcode);
  }
  getArrivalAirportCiy(airportcode)
  {
    var communicationParams = {
      showLoader: true,
      reqUrl: "",
      reqBody: {},
      callBackSuccess: (response) => {
       this.arrivalairportcity=response.airport.city
       // console.log(response.airport.city)
      },
      callBackFailure: (response) => { console.log("failure dude"); console.log(response); }
    };
    this.restservice.airportNameRequest(communicationParams,airportcode);
  }
  getDepartureAirportCiy(airportcode)
  {
    var communicationParams = {
      showLoader: true,
      reqUrl: "",
      reqBody: {},
      callBackSuccess: (response) => {
       this.departureairportcity=response.airport.city
      },
      callBackFailure: (response) => { console.log("failure dude"); console.log(response); }
    };
    this.restservice.airportNameRequest(communicationParams,airportcode);
  }
  getDataFromStorage(flightid)
  {
    this.nativeStorage.getItem('arrivaldetails')
      .then(
        data =>{
          // alert(JSON.stringify(data))
          this.idArray=data.id;
          this.myflightDetailsArray=data.fligtdetails;
          this.arrivaltimeArray=data.arrivaltime;
          this.departureArray=data.departuretime;
          this.airlinename_array=data.airline;
          this.arrival_airport_array=data.arrival_airport;
          this.departure_airport_array=data.departure_airport
          this.city_arrival_array=data.arrival_location
          this.city_departure_array=data.departure_location
          this.status_array=data.status
        //  alert(this.currentstatus)
       //   alert(this.idArray.length)
          for(let i=0;i<this.idArray.length;++i)
          {
            alert("loop"+this.idArray[i])
            //alert(flightid)
            if (this.idArray[i]==flightid){
             // alert("true")
            //  this.item[i].idcheckarvl = true;
             this.idcheckarvl=true;
              alert("itm.check "+this.item.idcheckarvl)
            //  alert("check "+this.idcheckarvl)
              this.currentIndex=i;
           //   alert("currebt index"+this.currentIndex)
              break;
            }
            else
              this.item.idcheckarvl = false;
          }
        },
        error => console.error(error)
      );

  }
}

Html:


  <ion-card *ngFor= "let item of objectData;let k=index;" >
    <ion-card-content (click)="showmore(k,item.carrierFsCode,item.arrivalAirportFsCode,item.departureAirportFsCode,item.flightId);" id="{{k}}" style="display: block">
      <p style="font-size: 22px;">{{item.carrierFsCode}}{{item.flightNumber}}</p>
      <div class="row" style="border-bottom:0px">
        <div class="col" style="font-size: 25px">{{item.departureAirportFsCode}}</div>
        <div class="col" style="padding-top: 20px"><hr></div>
        <div class="col" style="text-align: right;font-size: 25px">COK</div>
      </div>
      <label style="padding-left: 40px;color: #008000">{{item.status | statusupdator}}</label><label style="padding-right: 5px;padding-left: 5px;">-</label><label>departs in 2 hr 4mins</label>
    </ion-card-content>


    <ion-card-content  class="panel" id="{{k}}second" style="display: none" (click)="showless(k);">
      <p style="font-size: 22px;">{{airline_name}}</p>
      <div class="row" style="border-bottom:0px">
        <div class="col" style="font-size: 25px">{{item.departureAirportFsCode}}</div>
        <div class="col" style="padding-top: 20px"><hr></div>
        <div class="col" style="text-align: right;font-size: 25px">COK</div>
      </div>
      <label style="padding-left: 40px;color: #008000">{{item.status | statusupdator}}</label><label style="padding-right: 5px;padding-left: 5px;">-</label><label>departs in 2 hr 4mins</label>

      <div class="col" style="padding-top: 20px"><hr></div>

      <label>Departed from {{departureairportcity}}</label><br>
      <div class="row" style="border-bottom:0px">
        <div class="col">Time</div>
        <div class="col" style="text-align: center">Terminal</div>
        <div class="col" style="text-align: right">Gate</div>
      </div>
      <div class="row" style="border-bottom:0px">
        <div class="col" style="font-size: 18px">{{item.departureDate.dateLocal |timesplit}}</div>
        <div class="col" style="font-size: 18px;text-align: center">2</div>
        <div class="col" style="text-align: right;font-size: 18px">A5</div>
      </div>

      <div class="col" style=""><hr></div>


      <label>Arrives at {{arrivalairportcity}}</label><br>
      <div class="row" style="border-bottom:0px">
        <div class="col">Time</div>
        <div class="col" style="text-align: center">Terminal</div>
        <div class="col" style="text-align: right">Gate</div>
      </div>
      <div class="row" style="border-bottom:0px">
        <div class="col" style="font-size: 18px">{{item.arrivalDate.dateLocal |timesplit}}</div>
        <div class="col" style="font-size: 18px;text-align: center">2</div>
        <div class="col" style="text-align: right;font-size: 18px">C6</div>
      </div>

      <div class="col" style=""><hr></div>

      <div class="row" style="border-bottom:0px">
        <div class="col" >Add to My Flights</div>
        <div class="col"><ion-toggle [(ngModel)]="idcheckarvl[k]"   (ionChange)="updateItemarrivals(idcheckarvl,item,item.flightId,item.arrivalDate.dateLocal,item.departureDate.dateLocal,airline_name,item.arrivalAirportFsCode,item.departureAirportFsCode,arrivalairportcity,departureairportcity,item.status)" style="padding:5px;float: right"></ion-toggle></div>

        <!--<div class="col"  *ngIf="idcheckarvl"><ion-toggle  checked="true" (ionChange)="updateItemarrivals(item.idcheckarvl,item,item.flightId,item.arrivalDate.dateLocal,item.departureDate.dateLocal)" style="padding:5px;float: right"></ion-toggle></div>-->
      </div>


    </ion-card-content>
  </ion-card>
20

in which event you did it ?

ionviewdid ?