RxJS novato aquí y probablemente me esté equivocando por completo ...

Estoy tratando de obtener un objeto por su ID de una matriz BehaviourSubject.

Aquí hay algo de código:

servicio.ts:

 import { iBeer } from './../models/beer'; import { Injectable } from '@angular/core'; import { Observable, BehaviorSubject } from 'rxjs'; import { map } from 'rxjs/operators' @Injectable({ providedIn: 'root' }) export class BeerService { private beers: iBeer[] = beerList; private beerSubject = new BehaviorSubject<iBeer[]>(this.beers); beers$ = this.beerSubject.asObservable(); getAll():Observable<iBeer[]>{ return this.beers$ } getById(id:number){ return this.beers$.pipe( map(beer => beer.find(beer => beer.id === id))) } }

componente.ts:

 import { BeerService } from './../beer.service'; import { iBeer } from './../../models/beer'; import { Component, OnInit } from '@angular/core'; @Component({ selector: 'shop', templateUrl: './shop.component.html', styleUrls: ['./shop.component.css'] }) export class ShopComponent implements OnInit { beers!: iBeer[]; beerID?: iBeer; id:number = 0; constructor(private BeerService:BeerService) { } ngOnInit(): void { this.BeerService.getAll().subscribe( (data:iBeer[]) => this.beers = data); this.BeerService.getById(this.id).subscribe( (data) => this.beerID = data) } selectedID(id:number){ this.BeerService.getById(id).subscribe( (data) => this.beerID = data) } }

Tengo los siguientes problemas:

1. onInit llama correctamente y muestra el objeto con el valor de identificación predeterminado. Si trato de insertar otra ID de la entrada html, va correctamente al método de servicio pero siempre devuelve indefinido.

2. Traté de eliminar la llamada dentro de onInit. Si hago la primera llamada con la ID predeterminada, muestra correctamente el elemento relativo, pero si la ID predeterminada es, por ejemplo, 3 y configuro 1 desde la entrada Html para la primera llamada, devuelve indefinido.

¿Cómo puedo resolver esto?