Subscribers to BehavorSubject not deteciting chanfes - html

Question

I'm working with localforage service who works asynchronous. I have created my own service to manage all about localforage dat. This service is added to appmodule to be global.
The problema that I have is that even I've been subscribed to er,ew,eu,ed BehavorSubject vars, the subscriptors to this vars not detecting changes or there are not notified for changes. This vars are privileges of the user in app (boolean values) in order to show/hide some thins according to this privileges
My app.module.ts:
providers: [appRoutingProviders, AuthGuard, BnNgIdleService, IndexedDBService, {
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptorService,
multi: true
}],
My IndexedDBService:
import { AfterViewInit, Injectable, OnInit } from "#angular/core";
import { LocalForageService } from "ngx-localforage";
import { BehaviorSubject, Observable, ReplaySubject, Subject } from "rxjs";
//#Injectable({ providedIn: 'root' })
export class IndexedDBService implements OnInit{
private isLoading: BehaviorSubject<boolean>
private er: BehaviorSubject<boolean> = new BehaviorSubject(false);
private ew: BehaviorSubject<boolean> = new BehaviorSubject(false);
private eu: BehaviorSubject<boolean> = new BehaviorSubject(false);
private ed: BehaviorSubject<boolean> = new BehaviorSubject(false);
constructor(
private localforage: LocalForageService
){
this.isLoading = new BehaviorSubject(false);
}
ngOnInit(): void {
this.getUsrPrivileges();
}
public showSpinner(){
this.isLoading.next(true);
}
public hideSpinner(){
this.isLoading.next(false);
}
public isPageLoading(){
return this.isLoading;
}
public setToken(token: string){
this.localforage.setItem('token',token);
}
public getToken(){
return this.localforage.getItem('token')
}
public clearLocalForage(){
return this.localforage.clear().toPromise();
}
public getER(): Observable<boolean>{
return this.er.asObservable();
}
public setER(er: boolean){
this.er.next(er);
this.localforage.setItem('er',er);
}
public setEW(ew: boolean){
this.ew.next(ew);
this.localforage.setItem('ew',ew);
}
public getEW(): Observable<boolean>{
return this.ew.asObservable();
}
public setEU(eu: boolean){
this.eu.next(eu);
this.localforage.setItem('eu',eu);
}
public getEU(): Observable<boolean>{
return this.eu.asObservable();
}
public setED(ed: boolean){
this.ed.next(ed);
this.localforage.setItem('ed',ed);
}
public getED(): Observable<boolean>{
return this.ed.asObservable();
}
getUsrPrivileges(){
this.localforage.getItem('er').subscribe(value => this.er.next(value));
this.localforage.getItem('ew').subscribe(value => this.ew.next(value));
this.localforage.getItem('eu').subscribe(value => this.eu.next(value));
this.localforage.getItem('ed').subscribe(value => this.ed.next(value));
}
}
In my LoginAppComponent I get and fill the user privileges:
...
constructor(
...
private _indexedDBService: IndexedDBService,
...
) {
}
setUsrPrivileges(privilegios: string){
let er = privilegios.substring(0,1) === '1';
let ew = privilegios.substring(1,2) === '1';
let eu = privilegios.substring(2,3) === '1';
let ed = privilegios.substring(3,4) === '1';
this._indexedDBService.setER(er);
this._indexedDBService.setEW(ew);
this._indexedDBService.setEU(eu);
this._indexedDBService.setED(ed);
}
...
In my app menu I have subscribers to this er,ew,eu,ed values of IndexedDBService who have to be notified for any change. But they always keep with false value.
My AppMenuComponent
import { AfterViewInit, Component, OnDestroy, OnInit } from '#angular/core';
import { Subject } from 'rxjs-compat';
import { IndexedDBService } from 'src/app/services/indexeddb.service';
#Component({
selector: 'app-appmenu',
templateUrl: './appmenu.component.html',
styleUrls: ['./appmenu.component.css']
})
export class AppMenuComponent implements OnInit, OnDestroy {
unsubscribe: Subject<boolean> = new Subject();
public er: boolean;
public ew: boolean;
public eu: boolean;
public ed: boolean;
constructor(
private _indexedDBService: IndexedDBService
) {
this.er = false;
this.ew = false;
this.eu = false;
this.ed = false;
}
ngOnDestroy(): void {
this.unsubscribe.next(true);
this.unsubscribe.complete();
}
ngOnInit(): void {
this.getUsrPrivileges();
}
getUsrPrivileges(){
this._indexedDBService.getER().subscribe(value => this.er = value);
this._indexedDBService.getEW().subscribe(value => this.ew = value);
this._indexedDBService.getEU().subscribe(value => this.eu = value);
this._indexedDBService.getED().subscribe(value => this.ed = value);
}
}
In my AppMenu html I show/hide the item depending of the er value ([hidden]="!er"):
...
<!-- Gestionar Alumnos -->
<ul class="nav nav-treeview" [hidden]="!er">
<li class="nav-item">
<a [routerLink]="['/alumnos/gestionalumno']" class="nav-link">
<i class="fas fa-user-graduate"></i>
<p style="padding-left: 7px;">Alumnos</p>
</a>
</li>
</ul>
<!-- Fin Gestionar Alumnos -->
<!-- Gestionar Tutores -->
<ul class="nav nav-treeview" [hidden]="!er">
<li class="nav-item">
<a [routerLink]="['/']" class="nav-link">
<i class="fas fa-user-tie"></i>
<p style="padding-left: 7px;">Tutores</p>
</a>
</li>
</ul>
<!-- Fin Gestionar Tutores -->
<!-- Gestionar Profesores -->
<ul class="nav nav-treeview" [hidden]="!er">
<li class="nav-item">
<a [routerLink]="['/']" class="nav-link">
<i class="fas fa-chalkboard-teacher"></i>
<p style="padding-left: 7px;">Profesores</p>
</a>
</li>
</ul>
<!-- Fin Gestionar Profesores -->
...
When I make the login, I fill the privileges who are value of true, but the Alumno, Tutor and Profesor always keep hidden, because they not detecting that the value changed to true;
In my indexeddb I see that the value of these vars are true.
I suspect the the BehavorSubject vars are emitting there values befor subscribers are subscribed. It's possible? If is the case ... what can I do to sole it?

Answer 1

Finally I found the problem!
The problem it was occurring because I was working with different instances of IndxedDBService.
All the components of the app was working with IndexedDBService who is provided in appModule, but accidentally I added this provider in my login component. So, for this reason, all component was working for one hand and the login component with another hand.
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
providers: [AuthenticationService,IndexedDBService]
})
export class LoginComponent implements OnInit {
So, removing IndexedDBService of login component providers. The problem was solved
providers: [AuthenticationService]