Ionic is not calling functions for the second time

Within my Ionic application, I have implemented 2 tabs named applied and rejected. Upon initially visiting the appliedPage, a method within the constructor is triggered and successfully displays the desired output, much like the RejectedPage. However, upon proceeding to a third page and taking action by either applying or rejecting, the modifications do not carry over to either the AppliedPage or RejectedPage. Specifically, after clicking on apply or reject, returning to the respective applied or rejected page does not invoke the Http in the constructor. Ideally, each time a particular page is accessed, it should automatically trigger a specific method responsible for fetching data from the DB using http. How can this be achieved?

constructor(public navCtrl: NavController, public navParams: NavParams,
              private getAppliedlist: ActionsProvider)
  {

   console.log('fetching data`);
    this.getAppliedlist.getAppliedList().subscribe((data: any) => {
      this.applied = data;
      console.log(this.applied);
    })
  }

The code snippet above pertains to the AppliedPage.

Answer №1

Instead of initializing it in the constructor, it's best to utilize the ionic framework's lifecycle functions. Specifically, the ionViewWillEnter function fits perfectly for this scenario.

As stated in the documentation:

when entering a page, before it becomes the active one. Use it for tasks you want to do every time you enter the view (setting event listeners, updating a table, etc.).

ionViewWillEnter() {
  console.log('fetching data`);
  this.getAppliedlist.getAppliedList().subscribe((data: any) => {
    this.applied = data;
    console.log(this.applied);
  })
}

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

displaying an AngularJS ng-repeat as empty following the completion of an Ionic loading operation

When using $ionicLoading to load the news page, a message is displayed if no news is found: <div ng-show="!news.length" class="empty"> Nothing to show ! </div> However, there is an issue where the empty div (Nothing to show !) is visible durin ...

How does f' differ from let f = <F>f?

Here is the code snippet I'm working with: interface F { (): string; a(): number; } function f() { return '3'; } f['a'] = function () { return 3; }; Next, my goal is to assign a function to a variable. This can ...

Encountering an error in the WebStorm 2017.1.1 editor

My current editor is WebStorm 2017.1.1 and everything seems to be working fine in terms of output. The issue I'm facing is that the editor keeps displaying red syntax errors, even though I can't pinpoint what's causing it or which plugin ne ...

Troubleshooting the issue of the "selected" attribute not functioning properly within the "ion-selected" element in Ionic 2

Currently, I am utilizing Ionic 2 to develop a mobile application. Interestingly, when I incorporate the selected attribute within the ion-select element on one page, it functions correctly. However, when attempting to implement it on another page (compone ...

The function Observable.of is not available when importing correctly

I encountered an issue with importing the "of" method for observable in Angular 6. Even after setting up a new project and updating all packages, the error persists. To troubleshoot, I created a small project to identify the problem. Here is the service: ...

Exploring the power of NestJS integration with Mongoose and GridFS

I am exploring the functionality of using mongoose with NestJs. Currently, I am leveraging the package @nestjs/mongoose as outlined in the informative documentation. So far, it has been functioning properly when working with standard models. However, my p ...

The element mat-divider in Angular is unrecognized

While testing a popup component in Angular, I encountered an error message that says: 'mat-divider' is not a known element: 1. If 'mat-divider' is an Angular component, then verify that it is part of this module. 2. If ' ...

Unable to establish a time interval for the function

Here is the function I am calling: refreshServices() { this.services = this.monitorService.getServices(); } I call it in the constructor like so: constructor(private localNotifications: LocalNotifications, public monitorService: MonitorService) { this.r ...

Obtain information from a JSON file based on a specific field in Angular

The structure of the JSON file is as follows: localjson.json { "Product" :{ "data" : [ { "itemID" : "1" , "name" : "Apple" , "qty" : "3" }, { "itemID" : "2" , "name" : "Banana" , "qty" : "10" } ] ...

Angular's response was not accurate

Just dipping my toes into nodejs & angular and here's my restAPI function: exports.getPlanningStages = async (req, res, next) => { const currentPage = req.query.page || 1; const perPage = 2; try { const totalItems = await Planningstage. ...

Halt of dispatcher playback occurs after a duration of 10 minutes with discord.js

Currently, I've been working on a music bot using discord.js. To handle audio streaming, I'm utilizing @discordjs/opus and ytdl-core-discord. Everything runs smoothly when testing the bot locally on my machine - songs from YouTube are played with ...

Increasing numbers using Vuex Module Decorators and TypeScript

I'm encountering a major challenge with incrementing data. @Module class Mod extends VuexModule { public value = 2; // facing multiple type errors when trying to access this.state.value within a MutationAction. @MutationAction({ mutate: [" ...

Angular - facing challenges while populating multiple tables with detailed information for multiple records

I am working with an angular HTML code structure that generates multiple tables when receiving more than one record. How can I prevent this from happening? <div *ngFor="let item of materialsDetails"> <ng-container *ngFor="let su ...

Transforming a Typescript tuple into an object type

Let's consider a scenario where I have a tuple type structured like this: type Data<T extends string, V> = { type: T, value: V }; type TupleExample = [ Data<'string', string>, Data<'number', number>, ...

Troubleshooting Firebase: How come my code is only accessing the initial document in my Collection?

After spending hours searching, I still can't find a solution to my problem with this code. The Firebase log file only shows: "after for each =undefinedsensor_location_1undefinedundefinedundefined " Why is it only referencing the first do ...

Arranging an array of objects in a structured format

I'm working with an array of objects that looks like this const obj = [{ '1': 'a'},{ '2': 'b'}, {'3': 'c'}] and I need to extract the keys and values separately, like so: ['1',&apo ...

Verify whether the element is located outside the React window

I need help refining my code to determine if a div element is located outside the viewport. The current issue is that it does not adequately consider changes in the isOpen state and may overlook situations where the element is just slightly outside the scr ...

Is there a way to trigger a custom event from a Web Component and then intercept it within a React Functional Component for further processing?

I'm facing an issue with dispatching a custom event called "select-date" from a custom web component date picker to a React functional component. Despite testing, the event doesn't seem to be reaching the intended component as expected. Below is ...

Prevent dividing TypeScript branded types by using the `eslint no-restricted-syntax` selector

I have defined a custom TypeScript type as follows: export type Milliseconds = number & { __type: 'milliseconds' }; and I want to restrict the usage of the division operator on this type, like so: const foo = 1 as Milliseconds; const bar = f ...

Issue encountered with utilizing the asynchronous pipe in conjunction with a piped observable

I've been working on this Angular component and HTML code, but I'm puzzled as to why nothing is being displayed. The CSS class is being added (as seen in the first line of the HTML), however, despite the service returning data, there are no visib ...