Ionic toggle to store in native


#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 ?