In Angular 4, the variable within the component is refreshed or updated only when the service is called for the second

Question

In Angular 4, the variable within the component is refreshed or updated only when the service is called for the second

Recently, I started working with the Angular framework and encountered an issue while developing a basic data retrieval feature from a component using a service. I had already set up a web service that returns specific data for an ID (wwid). The function called via the service (app.service) from the component (queueSearch.component) triggers a GET request. Although the data is successfully retrieved within the service, it doesn't update the variable associated with the component (waittime) immediately. Strangely, the variable only gets updated after a second call (requiring me to click the search button twice to reflect the change on the HTML). How can I ensure that it updates with a single click?

app.service.ts

searchWWID(wwid: number)
{
  console.log("from app service wwid: " + wwid.toString());
  this.http.get("http://localhost:3000/api/list/" + wwid).subscribe(Data =>{
     if(Data != null)
     {
       this.waitingTime = JSON.stringify(Data)
     }
     else
     {
       this.waitingTime = "";
     }
     //this gets updated instantaneously and prints 
     console.log(this.waitingTime);
    });
   return this.waitingTime;
  }
}

queueSearch.component.ts

searchWWID()
{
  if(isNaN(Number(this.wwid)))
  {
    console.log("not a number");
  }
 else
 {
   if(this.wwid.toString().length !== 8)
   {
     console.log("should be eight digits")
   }
   else
   { 
     //this(waittime) only gets updated after every second call to this function
     this.waitTime =  this.AppService.searchWWID(Number(this.wwid))
   }
  }
}

queueSearch.component.html

 <h1>{{title}}</h1>
 <div style ="text-align:center">
 <form>
 <input type="text" class="form-control" placeholder="enter wwid" 
 [(ngModel)]="wwid" name="wwid" id="searchWWID">
 <button class="btn btn-primary" id="submitButton" 
 (click)=searchWWID()>Submit</button>
 </form>
 </div>
 <h2>waiting time: {{waitTime}}</h2>

Desired Outcome: Update waittime in HTML instantaneously after calling searchWWID().

Current Outcome: waittime only updates after every second function call.

angular typescript http

Answer 1

Answer №1

Initially, the issue with the Service call not functioning as expected is as follows:

class Service {
    constructor(private http: HttpClient) {}

    waitingTime: string;

    searchWWID(wwid: number): string
    {
        // 1. To begin, you create the request
        this.http
            .get('http://localhost:3000/api/list/' + wwid)
            .subscribe(Data => {
                if (Data != null) {
                    this.waitingTime = JSON.stringify(Data);
                } else {
                    this.waitingTime = '';
                }
                console.log(this.waitingTime);
            });
        // 2. After that, you return the waiting time
        return this.waitingTime;
        // 3. 500ms later...
        // 4. You actually receive the response and set `this.waitingTime`
        //    but unfortunately, you have already returned
        // 5. No worries: the next time you call this function,
        //    it will return the result obtained at "step 2" above
    }
}

Due to the asynchronous nature of the result, it is advisable to use a Promise or an Observable to return the result. Since the http.get function returns an observable, we will utilize Observable:

import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {map, tap} from 'rxjs/operators';

class Service {

    constructor(private http: HttpClient) {}

    searchWWID(wwid: number): Observable<string>
    {
        return this.http
            .get('http://localhost:3000/api/list/' + wwid)
            .pipe(
                // Use a `map` for data transformation
                map(data => data !== null ? JSON.stringify(data) : ''),
                // Utilize a `tap` for a side effect
                tap(idString => console.log(idString)),
            );
    }
}

Now that the service call returns Observable<string>, all we need to do is integrate it into the component code:

class Component {
    constructor(private appService: Service) {}

    wwid: string;

    searchWWID(): void
    {
        // Implement "early return" to eliminate additional nesting
        if (isNaN(Number(this.wwid))) {
            console.log('not a number');
            return;
        }

        if (this.wwid.toString().length !== 8) {
            console.log('should be eight digits');
            return;
        }

        this.appService
            .searchWWID(Number(this.wwid))
            .subscribe((result: string) => this.wwid = result);
    }
}

However, there is a slight issue with the above code. When using subscribe in your component code, it's essential to remember to unsubscribe at some point (particularly when the component is destroyed).

One approach to address this is by storing the subscription in a property and manually unsubscribing using the onDestroy hook:

import {OnDestroy} from '@angular/core';
import {Subscription} from 'rxjs';

class Component implements OnDestroy {
    constructor(private appService: Service) {}

    wwid: string;
    wwidSubscription: Subscription;

    searchWWID(): void
    {
        // Implement "early return" to eliminate additional nesting
        if (isNaN(Number(this.wwid))) {
            console.log('not a number');
            return;
        }
        if (this.wwid.toString().length !== 8) {
            console.log('should be eight digits');
            return;
        }
        this.wwidSubscription = this.appService.searchWWID(Number(this.wwid))
            .subscribe((result: string) => this.wwid = result);
    }

    ngOnDestroy() {
        this.wwidSubscription.unsubscribe();
    }
}

update

As suggested in the comments, since our operation is a "one-off thing" where we receive the response once, we can use take(1), which will automatically complete the observable and unsubscribe the subscribers.

Furthermore, methods in the Http module such as get, post, etc., automatically complete once the request is finished. Therefore, in this scenario, we may not need to take any specific action, depending on the extent to which you prefer to expose the service details in your component.

Answer 2

Initially, the issue with the Service call not functioning as expected is as follows:

class Service {
    constructor(private http: HttpClient) {}

    waitingTime: string;

    searchWWID(wwid: number): string
    {
        // 1. To begin, you create the request
        this.http
            .get('http://localhost:3000/api/list/' + wwid)
            .subscribe(Data => {
                if (Data != null) {
                    this.waitingTime = JSON.stringify(Data);
                } else {
                    this.waitingTime = '';
                }
                console.log(this.waitingTime);
            });
        // 2. After that, you return the waiting time
        return this.waitingTime;
        // 3. 500ms later...
        // 4. You actually receive the response and set `this.waitingTime`
        //    but unfortunately, you have already returned
        // 5. No worries: the next time you call this function,
        //    it will return the result obtained at "step 2" above
    }
}

Due to the asynchronous nature of the result, it is advisable to use a Promise or an Observable to return the result. Since the http.get function returns an observable, we will utilize Observable:

import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {map, tap} from 'rxjs/operators';

class Service {

    constructor(private http: HttpClient) {}

    searchWWID(wwid: number): Observable<string>
    {
        return this.http
            .get('http://localhost:3000/api/list/' + wwid)
            .pipe(
                // Use a `map` for data transformation
                map(data => data !== null ? JSON.stringify(data) : ''),
                // Utilize a `tap` for a side effect
                tap(idString => console.log(idString)),
            );
    }
}

Now that the service call returns Observable<string>, all we need to do is integrate it into the component code:

class Component {
    constructor(private appService: Service) {}

    wwid: string;

    searchWWID(): void
    {
        // Implement "early return" to eliminate additional nesting
        if (isNaN(Number(this.wwid))) {
            console.log('not a number');
            return;
        }

        if (this.wwid.toString().length !== 8) {
            console.log('should be eight digits');
            return;
        }

        this.appService
            .searchWWID(Number(this.wwid))
            .subscribe((result: string) => this.wwid = result);
    }
}

However, there is a slight issue with the above code. When using subscribe in your component code, it's essential to remember to unsubscribe at some point (particularly when the component is destroyed).

One approach to address this is by storing the subscription in a property and manually unsubscribing using the onDestroy hook:

import {OnDestroy} from '@angular/core';
import {Subscription} from 'rxjs';

class Component implements OnDestroy {
    constructor(private appService: Service) {}

    wwid: string;
    wwidSubscription: Subscription;

    searchWWID(): void
    {
        // Implement "early return" to eliminate additional nesting
        if (isNaN(Number(this.wwid))) {
            console.log('not a number');
            return;
        }
        if (this.wwid.toString().length !== 8) {
            console.log('should be eight digits');
            return;
        }
        this.wwidSubscription = this.appService.searchWWID(Number(this.wwid))
            .subscribe((result: string) => this.wwid = result);
    }

    ngOnDestroy() {
        this.wwidSubscription.unsubscribe();
    }
}

update

As suggested in the comments, since our operation is a "one-off thing" where we receive the response once, we can use take(1), which will automatically complete the observable and unsubscribe the subscribers.

Furthermore, methods in the Http module such as get, post, etc., automatically complete once the request is finished. Therefore, in this scenario, we may not need to take any specific action, depending on the extent to which you prefer to expose the service details in your component.

Answer 3

Answer №2

If you're working on the queueSearch.component.ts file, follow these steps:

 else { 
     // The waitTime variable only refreshes after every second call to this function
     this.waitTime =  this.AppService.searchWWID(Number(this.wwid));                           
      console.log(this.waitTime); // Verify if the value is being updated here.
// If it is, then it's an issue with dirty checking
// Include changedetectorref in your constructor and use that reference below.
 this.cdr.markForCheck();

}

Answer 4

If you're working on the queueSearch.component.ts file, follow these steps:

 else { 
     // The waitTime variable only refreshes after every second call to this function
     this.waitTime =  this.AppService.searchWWID(Number(this.wwid));                           
      console.log(this.waitTime); // Verify if the value is being updated here.
// If it is, then it's an issue with dirty checking
// Include changedetectorref in your constructor and use that reference below.
 this.cdr.markForCheck();

}

In Angular 4, the variable within the component is refreshed or updated only when the service is called for the second

Answer №1

Answer №2

Similar questions

How should I properly initialize my numeric variable in Vue.js 3?

Angular 7: Child component's OnChanges not firing under specific circumstances

Pause and be patient while in the function that delivers an observable

What steps should I take to enable users of my library to customize component templates as needed?

Creating a unique custom complex template typeahead implementation with Angular 2 and Ng2-Bootstrap

What is the best way to showcase information about an item alongside its parent in Angular 2?

Attempting to execute "npm install" on the organization's system is resulting in the following error message

NestJS is having trouble importing generated types from the Prisma client

angular2, my service announcement is triggered repeatedly

Typescript or Angular 2 for Google Maps

Using Private and Protected Methods in Typescript with React: Best Practices

Resolve ESLint errors in _document.tsx file of next.js caused by Document<any> and ctx.renderPage = () with TypeScript usage

Unable to access res.name due to subscription in Angular

When using Material-UI with TypeScript, an error is thrown stating that global is not defined

Displaying a component upon clicking a button in Angular 9

Modify the contents of an input box according to the values entered in other input boxes

Printing the HTML Template of a widget with multiple loops results in a blank first page being displayed

What is the best way to implement a dynamic templateUrl for an Angular 2 Component?

What could be causing Angular to not show the outcome? Why is it that only the complete-handler is being triggered?

Form with Material-UI's FreeSolo AutoComplete feature