When switching tabs, Ion-select should not reload the selected name

Whenever I switch tabs and then return to the previous tab in Ionic, the select field that was previously set becomes null, even though the page is still loading and the variable is populated.

<ion-header color="primary">
  <ion-navbar>
    <ion-title>Planilha</ion-title>
    <ion-item color="primary">
      <ion-label>Períodos</ion-label>
      <ion-select [(ngModel)]="periodoSelecionado" (ionChange)="filtraPeriodo()">
        <ion-option *ngFor="let p of periodos" [value]="p">{{p.nome}}</ion-option>
        <b>p.nome</b>
      </ion-select>
    </ion-item>
  </ion-navbar>
  <ion-searchbar color="primary" (ionInput)="getItems($event)"></ion-searchbar>
</ion-header>

In this scenario, when switching tabs, the value of p.nome does not reload upon returning to the tab unless clicked on again.

TS file:

ionViewDidEnter() {
  this.storage.get('apenasMinhasAtividades').then((confApenasMinhasAtividades) => {
    if (confApenasMinhasAtividades == null) {
      this.confApenasMinhasAtividades = false;
    } else {
      this.confApenasMinhasAtividades = confApenasMinhasAtividades;
    }
  });
  this.getPlanilha(true, true);
}

getPlanilha(carregarBanco?: boolean, filtraPeriodo?: boolean) {
  if (filtraPeriodo == true) {
    this.filtraPeriodo();
  }
}

Answer №1

To ensure smooth execution, it is crucial to include the method this.getPlanilha(true, true); within the promise block as illustrated below.

.ts

ionViewDidEnter() {
    this.storage.get('apenasMinhasAtividades').then((confApenasMinhasAtividades) => {
      if (confApenasMinhasAtividades == null) {
        this.confApenasMinhasAtividades = false;
      } else {
        this.confApenasMinhasAtividades = confApenasMinhasAtividades;
      }
      this.getPlanilha(true, true);
    });

  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When conducting a test, it was found that the JSX element labeled as 'AddIcon' does not possess any construct or call signatures

Here is a code snippet I'm currently working with: const tableIcons: Icons = { Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />), Check: forwardRef((props, ref) => <Check {...props} ref={ref} />) }; const AddIcon ...

Set up the user django with standard configuration values

I'm currently working with Django and Angular 2, trying to create a user with default values, but it's not happening as expected... Model class Settings(models.Model): user = models.ForeignKey('auth.User', related_name='setti ...

Converting the 'require' call to an import may be a more efficient method when importing package.json in a typescript file

In my current project, I am creating a class where I am directly accessing the package version number like this: const pkg = require('../package.json') export class MyClass() { constructor() { // Set the base version from package.jso ...

What is the best way to limit a property and template literal variable to identical values?

Instead of giving a title, I find it easier to demonstrate what I need: type Foo = "bar" | "baz"; interface Consistency { foo: Foo; fooTemplate: `${Foo} in a template`; } // This should compile (and it does) const valid1: Cons ...

Discovering React components within a shadow DOM utilizing TypeScript and Protractor [

I am currently faced with the challenge of locating elements within a shadow root from 9-11. Traditional locators like xpath, css, and id have proven unsuccessful in this scenario. However, I was able to successfully locate the element using JavascriptExec ...

What is the best way to outline this model using typescript?

Here is a JSON model that I am working with: { "loggers" : { "logger1" : { "name" : "logger1", "level" : "DEBUG", "sub_loggers" :{ "logger1.nested_logger1" : { "name": "lo ...

Leveraging the useRoute() function with Vue 3 Composition API and Typescript: [Vue alert]: The injection "Symbol(route location)" was not detected when employing Typescript

Just recently, I upgraded a Vue 2 application that heavily uses Vue Router and TypeScript to Vue 3. During the migration process, I switched a function from reading the route using this.$route in the Options API to using useRoute() in the Composition API. ...

Angular: How to restrict the compilation of rgba() to #rrggbbaa in your codebase

There are some browsers that do not support #rrggbbaa but do support rgba(). However, in my Angular project, background-color: rgba(58, 58, 58, 0.9) in common.css was compiled to background-color:#3a3a3ae6 in style.[hash].css. How can I prevent this co ...

Why is Angular ng-block-ui not functioning properly in Angular 7?

Within my app.module.ts file import { BlockUIModule } from 'ng-block-ui'; imports: [ BrowserModule, BlockUIModule.forRoot(), ] Inside the dashboard component: import { BlockUI, NgBlockUI } from 'ng-block-ui'; export class Da ...

Using typescript, encountering an issue with dynamic import and json file integration

When creating a function to retrieve test data for multiple environments, I encountered an issue: export class DataHelper { public static async getTestData(fileName: string): Promise<any> { return await import(`../${fileName}`); } } Running ...

Is it possible to utilize AngularfireList without observables? In other words, can I retrieve an AngularfireList object directly from Firebase and then process it in

I am attempting to retrieve an object from Firebase using AngularFire and angularfirelist. However, the returned object is not what I expected. Here is my code: export class AdminProductsComponent implements OnInit { products$ : AngularFireList<unkn ...

Tips to decrease the bundle size of Angular 2 with WebPack

After experimenting with various Angular 2 seed projects utilizing WebPack, I noticed that when I compile the bundle for production, the resulting file size is around 3MB. Is there a way to minimize the size of this file? An example of one of these proje ...

Angular - Resolving the issue of 'property does not exist on type' in TypeScript

Currently, I am following a video tutorial which also has a text version. Despite copying the code exactly as shown in the tutorial, I encountered the following error: Error TS2339: Property 'getEmployees' does not exist on type 'Employ ...

Transforming .d.ts files into HTML documentation

I possess a TypeScript declaration file (.d.ts) carefully documenting each function of an API. Can this documentation be elegantly displayed on a website in HTML format? Is there a solution for converting a .d.ts into a visually appealing .html document? ...

`Is there a way to implement a collapsing toolbar in Ionic 3?`

I am looking to design a page similar to the one shown above. The layout includes an image positioned at the top of two divisions, or sandwiched between a toolbar and content as seen in the image above. I have been unable to find any resources or documen ...

During the process of executing a HTTP GET request, an output of "OPTIONS https://riskassessmentidtypes.px-npe01.com/customer-credit/ 0 ()" was obtained

I am currently engaged in an internal project involving Angular 5. Our team is working on making an HTTP GET call to a URL located within the PCF environment. However, during this process, I encountered the following console message: OPTIONS 0 () Progre ...

I am facing conflicts between vue-tsc and volar due to version discrepancies. How can I resolve this problem?

My vsCode is alerting me about an issue: ❗ The Vue Language Features (Volar) plugin is using version 1.0.9, while the workspace has vue-tsc version 0.39.5. This discrepancy may result in different type checking behavior. vue-tsc: /home/tomas/Desktop/tes ...

What is the best method for custom Validators to access specific Values on a Form?

Seeking guidance on implementing custom validation in my Angular app. Specifically, I need to validate an email address input against a local array called emails. The challenge is that the emails data comes from an API call and is initially empty when the ...

Tips for making a property non-nullable in Typescript

The Node built-in IncomingMessage type from DefinitelyTyped's definition (used as req in the (req, res, next) arguments) has specified that url can be nullable. This excerpt shows part of the definition: // @types/node/index.d.ts declare module "http ...

Troubleshooting: ngModel in Angular 2 Component does not properly update the parent model

I have been attempting to develop a wrapper component for input elements like checkboxes, but I am facing an issue where the parent variable (inputValue) is not updating even though it has been defined as an ngModel. The code snippet for my component look ...