Tengo un escenario en el que envío datos de un componente a un servicio que luego manipula los datos. La idea era que cuando obtengo datos en el componente, inserto el cambio en una variable BehaviorSubject usando next .
Por alguna razón desconocida para mí, this.person.subscribe() no se activa al pasar el valor usando next . Sin embargo, cuando compruebo si se cambió el valor en el servicio, veo que se actualizó correctamente.
Componente
constructor(private incomeService: IncomeService) { } ngOnInit(): void { // Fetching data from a service this.person = fetchedTestData; // This doesn't trigger subscribe method in the service this.incomeService.person.next(fetchedTestData); // The data is definitely changed because the value is correctly set console.log(this.incomeService.person) }Servicio
person: BehaviorSubject<any> = new BehaviorSubject<any>(null); constructor() { this.person.subscribe(person => { // Do something else }); }¿Cuál parece ser el culpable aquí?
En general, los servicios de Angular están destinados a manejar la recuperación de datos y toda la lógica comercial, mientras que los componentes se suscriben a Observables para fines de visualización.
Si entiendo tu situación correctamente, sería mejor que hicieras algo como esto:
Servicio
public person$$ = new BehaviorSubject<unknown>(null); public person$ = this.person$$.asObservable(); public getPerson(): void { // logic for retrieving data this.person$$.next(response); }Componente
public person$ = this.incomeService.person$; // if you wanted to use console for debugging you could also add // .pipe(tap(person => console.log(person))) // which would log to console whenever the person$$ subject is updated in the service constructor(private incomeService: IncomeService) {} ngOnInit(): void { this.incomeService.getPerson(); }Modelo
<ng-container *ngIf="person$ | async as person"> {{ person | json }} </ng-container> En este caso, debido a que la canalización async se usa en la plantilla, maneja automáticamente la suscripción (y la cancelación de la suscripción cuando se destruye el componente). También puede .subscribe en la lógica del componente, solo asegúrese de tener una llamada para cancelar la unsubscribe en algún lugar para evitar pérdidas de memoria.
En el servicio tienes a la person como sujeto de conducta. Lo actualizaría allí, no en su componente.
componente
this.incomeService.updatePerson('something');Servicio
constructor() { this.person.subscribe(person => { console.log(person); }); } updatePerson(arg:string){ console.log('is this happening?', arg); this.person.next(arg); }El problema estaba en una función que estaba generando un error y que se ejecuta antes de llamar a next . Desafortunadamente me lo perdí porque los errores en mi consola de Google Chrome estaban ocultos.
Entonces, como recordatorio para cualquier otra persona que tenga un problema similar; verifique que sus métodos se ejecuten sin errores antes de entrar en pánico.