Loading data from localbrowser DB to ion-select isn't working

@stephenmonro wrote:

Hello all.
I’ve just about given up on how to make this work. I don’t know what else to do now except ask for help as I’ve been working on this for days.

I’m using ionic-v4.

What I’m trying to do is have a settings page be able to load and save values. I plan on storing this in local storage, and numeral values and other pages in my app are working where I’m just using a standard INPUT tag, however using an ion-select, it doesn’t work at all. All I seem to get is error messages - if a value in the local browser db exists. If a value in the dB doesn’t exist, it’ll move to the next ion-select, and they show an error.

I know this error is common to many people as I’ve been researching this and open a hundred links, but it’s rather complicated.

This is the frustrating error I get:

ERROR Error: “ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘model: fueltype’. Current value: ‘model: LPG’.”
Angular 7
View_SettingsPage_1 SettingsPage.html:32
Angular 27
RxJS 5
Angular 11
ERROR CONTEXTObject { view: {…}, nodeIndex: 36, nodeDef: {…}, elDef: {…}, elView: {…} }

My HTML code (with a shorten list of options) is:

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>
          Settings
        </ion-title>
      </ion-toolbar>
</ion-header>

<ion-content *ngIf="displayMain">
    <ion-card class="welcome-card"> 
        <ion-card-header>
          <ion-card-subtitle>Settings</ion-card-subtitle>
          <ion-card-title>Adjust as required.</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <p>Make the changes required for the default settings of the app.</p>
        </ion-card-content>
      </ion-card>
       
      <ion-grid padding>
          <ion-row>
              <ion-col col-12>   
                <ion-list>
                    <ion-label>App Settings</ion-label>
                    <ion-item>
                      <ion-label>Fuel Type</ion-label>
                      <br>
                      <ion-select  name="fueltype" id="fueltype" [(ngModel)]="fueltype"  value="{{fueltypeVal}}" okText="Save" cancelText="Cancel"> 
                        <ion-select-option value="91Petrol">91 Petrol</ion-select-option>
                        <ion-select-option value="LPG">LPG</ion-select-option>
                        <ion-select-option value="Gasoline">Gasoline</ion-select-option>
                        <ion-select-option value="Diesel">Diesel</ion-select-option> 
                      </ion-select>
                    </ion-item> 
                  </ion-list> 
              </ion-col>
          </ion-row> 

          <ion-row>
            <ion-col col-12>
                <ion-list>
                  <ion-label>Amount of Fuel </ion-label>
                  <br>
                  <ion-input class="pricenumbers" id="fuelamount" [(ngModel)]="fuelamount" type="number"></ion-input>
                </ion-list>
              </ion-col>
          </ion-row>

          <ion-row>
              <ion-col col-12>
                  <ion-list>
                    <ion-label>Country </ion-label>
                    <br>
                    <ion-select  name="country" id="country" [(ngModel)]="country"  value="{{countryVal}}" okText="Save" cancelText="Cancel">  
                        <ion-select-option value="cents">Cents</ion-select-option>
                        <ion-select-option value="dollars">Dollars</ion-select-option>
                      </ion-select>
                  </ion-list>
                </ion-col>
            </ion-row>

            <ion-row>
                <ion-col col-12>
                    <ion-list>
                      <ion-label>Measurement</ion-label>
                      <br>
                      <ion-select  name="measurement" id="measurement" [(ngModel)]="measurement"  value="{{measurementVal}}" okText="Save" cancelText="Cancel"> 
                          <ion-select-option value="litres">Litres</ion-select-option>
                          <ion-select-option value="gallons">Gallons</ion-select-option>
                        </ion-select>
                    </ion-list>
                  </ion-col>
              </ion-row>
 
            <ion-row>
                <ion-col col-12>
                    <button ion-button (click) = "saveSettings()" icon-start large round color="dark" style="width:100%; font-size: 3em;">
                        <ion-icon name="star" hidden></ion-icon>
                        Save settings
                    </button> 

                    <button hidden ion-button (click) = "loadSettings()" icon-start large round color="dark" style="width:100%; font-size: 3em;">
                      <ion-icon name="star" hidden></ion-icon>
                      Load settings
                  </button> 
                </ion-col>
            </ion-row> 
          
      </ion-grid> 
</ion-content>

My TS code is:

import { Component, OnInit } from '@angular/core';
import { Storage } from '@ionic/storage';  


@Component({
  selector: 'app-settings',
  templateUrl: './settings.page.html',
  styleUrls: ['./settings.page.scss'],
})
export class SettingsPage implements OnInit {
  

  constructor(private storage: Storage 
    ) { }

  fueltype: any = "fueltype";
  fueltypeVal: any = "Litres";
  fueltemp: any;
  displayMain: boolean;
  countryVal: any  = 0;
  measurementVal: any = 0;
  country: any = 0;
  measurement: any; 
  fuelamount: number = 50;
 

 ionViewWillEnter ()
 { 
  this.displayMain = false; 
  setTimeout(() => { 
    this.getSettings(); 
  },0);  
  this.displayMain = true;
 }

 ngOnInit()
  {    
  }  

  async getSettings()
  {
      // set a key/value   
        this.storage.get('fueltype').then((val) => { 
        this.fueltypeVal = val; 
 
        console.debug (this.fueltypeVal); 
      });  

        this.storage.get('fuel').then((val) => { 
        this.fuelamount = val;
        console.debug (this.fuelamount);
      });  

        this.storage.get('country').then((val) => { 
        this.countryVal = val; 
        console.debug (this.countryVal); 
      });  

       this.storage.get('measurement').then((val) => { 
        this.measurementVal = val;
        console.debug (this.measurementVal);
      });  

      console.debug (this.fueltype);
      console.debug (this.fuelamount);
      console.debug (this.country);
      console.debug (this.measurement); 
      console.debug (this.fueltypeVal);
      console.debug (this.fuelamount);
      console.debug (this.countryVal);
      console.debug (this.measurementVal);  

  }

  saveSettings()
  {
    this.storage.set('fueltype', this.fueltype);
    this.storage.set('fuel', this.fuelamount);   
    this.storage.set('country', this.country);
    this.storage.set('measurement', this.measurement);  
    console.debug (this.fueltype);
    console.debug (this.fuelamount);
    console.debug (this.country);
    console.debug (this.measurement); 
    console.debug (this.fueltypeVal);
    console.debug (this.fuelamount);
    console.debug (this.countryVal);
    console.debug (this.measurementVal); 
  }

  loadSettings()
  {
    this.getSettings();
  }

}

I don’t think I’m doing anything strange, because it works fine on the standard “Input” Tag. Just not these select options. Any thoughts? Am I approaching this in the wrong way?
Thanks in advance.
-Steve

Posts: 1

Participants: 1

Read full topic