CODEWITHSUNDEEP
angular
Russell Quinlan
Russell Quinlan

Reputation: 157

Angular 6 - Variable in service not updating

I have an Angular app with multiple components, with a singular service injected into all of them. The service contains methods to interact with my REST backend. I am trying to make it so when a request is made using one component, it increases a count variable in the service. However, when I try to access that variable from another component, it returns it's original value.

jwt.service.ts

import { catchError } from "rxjs/operators";
import { environment } from "../environments/environment";
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable, of } from "rxjs";

import { CookieService } from "ngx-cookie-service";

@Injectable({ providedIn: "root" })
export class JwtService {

  requests: number;

  constructor(
    private http: HttpClient,
    private cookieService: CookieService
  ) {
      this.requests = 0;
    }

  createJWT(id: string) {
    const url = `/${id}/token`;
    this.requests = this.requests++;
    return this.http
      .post(environment.apiUrl + url, this.cookieService.get('token'))
      .pipe(catchError(this.handleError(`createJWT id=${id}`)));
  }

  getRequests() {
    return this.requests;
  }

  verifyJWT(id: string, jwt: string) {
    ...
  }

  getActiveJWTs() {
    ...
  }

  revokeJWT(jwt: string) {
    ...
  }

  signIn(username: String, password: String) {
    ...
  }

  handleError<T>(operation = "operation", result?: T) {
    ...
  }
}

certificate-authority.component.ts

import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';

import { JwtService } from '../jwt.service';

@Component({
  selector: 'app-certificate-authority',
  templateUrl: './certificate-authority.component.html',
  styleUrls: ['./certificate-authority.component.css']
})
export class CertificateAuthorityComponent implements OnInit {

  active: string[] = null;
  activeJWT = "";
  requests = 0;

  constructor(
    private jwtService: JwtService,
  ) {
      interval(5000).subscribe(val => this.checkUpdate());          
   }

  ngOnInit() {
    this.getActive();

  }

  getActive() {
    ...
  }

  revokeJWT() {
    ...
  }

  viewJWT(jwt: string) {
    this.activeJWT = jwt;
  }

  checkUpdate() {
    if (this.requests != this.jwtService.getRequests()) {
      this.requests++;
      this.getActive();
    }
  }
}

If I access the 'createJWT()' method x amount of times from this component, it will correctly return x at each interval. But, if I access the 'createJWT()' method from another component, as intended, the current component only ever sees the requests count as 0;

This leads me to believe that each component that jwt.service is injected into would create a new instance of jwt.service. But this doesn't seem right. The whole point of services vs components is that services can contain anything that doesn't pertain to a specific view. How can I make it so no matter what component I access 'createJWT()' from, my Certificate Authority Component will return the correct amount of requests?

Upvotes: 0

Views: 918

Answers (1)

JB Nizet
JB Nizet

Reputation: 691645

There is only one service. But you have a copy of the counter in the component, so incrementing the counter of the service won't automagically increment the copy in every component.

Also, your interval increments the value of the copy instead of initializing the value of the copy with the service value, and you don't initialize the copy at initialization time.

Just don't create a copy, and display the unique, correct value stored in the service:

get requests() {
  return this.jwtService.getRequests();
}

Upvotes: 2

Related Questions