Entonces, primero se llama a la función getCart en b-navbar.component.ts :

 export class BNavbarComponent implements OnInit{ appUser: any; cart$ : Observable<ShoppingCart | null>; constructor(private auth : AuthService, private shoppingCartService : ShoppingCartService) {} async ngOnInit() { this.auth.appUser$.then(dataObservable => { dataObservable?.subscribe(data => { this.appUser = data }); }); this.getCart() } async getCart() { this.cart$ = await this.shoppingCartService.getCart() this.cart$.subscribe(data => { console.log("Nav Observable data: ", data); }) }

Que busca en shopping-cart.service.ts y obtiene la promesa de un observable:

 export class ShoppingCartService { constructor(private db : AngularFireDatabase) { } private create(){ return this.db.list("/shopping-carts").push({ // dateCreated : new Date().getTime() date: "date" }); } async getCart(): Promise<Observable<ShoppingCart>>{ let cartId = await this.getOrCreateCartId(); let cart = this.db.object("/shopping-carts/" + cartId); return new Promise((resolve) => { cart.valueChanges().subscribe(x => { let newX = x as ShoppingCart let items = newX.items resolve(of(new ShoppingCart(items))) }) }) } private async getOrCreateCartId() : Promise<string> { let cartId = localStorage.getItem("cartId"); if (cartId) return cartId; let result = await this.create(); localStorage.setItem("cartId", result.key as string); return result.key as string; } }

Ahora surge el problema al interpolar los valores en mi html, ya que el observable devuelto en la promesa getCart resuelve un observable "estático", lo que significa que termina el observable cuando se resuelve, por lo que los datos nunca se actualizan. Por favor ayuda :))

 <a class="navbar-item" routerLink="/shopping-cart"> Shopping Cart <span *ngIf = "cart$ | async as cart" class="tag is-warning is-rounded" > {{ cart.totalItemsCount }} </span> </a>