es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La actualización al tema no se está produciendo en Rxjs.

19 Jul, 2023 Programación

Estoy intentando actualizar un RxJS Subject a través del método de un componente. Pero no está sucediendo correctamente.

cricketData$ = new Subject<string>();

ngOnChanges() {
  this.cricketData$
    .asObservable()
    .pipe(
      tap(() =>
        console.log(
          'Disparando llamada REST para la pestaña de cricket con el año',
          this.year
        )
      ),
      take(1)
    )
    .subscribe();
  this.cricketData$.next('sachin');
}

updateCricketData() {
   this.cricketData$.next('dravid');
}

Si elimino el operador take, el sujeto se actualiza. Pero se realizan múltiples llamadas al servicio al seleccionar los valores del menú desplegable. ¿Existe algún otro operador o enfoque en RxJS que me permita lograr los siguientes escenarios?

  1. Las llamadas al servicio solo se activan una vez al seleccionar los valores del menú desplegable.
  2. El sujeto también se actualiza a través del método del componente.

Consulte el siguiente enlace de StackBlitz. Gracias anticipadas.

URL del editor Stackblitz: EditorURL

URL de la aplicación Stackblitz: AppURL

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr ambos escenarios, puedes utilizar el operador distinctUntilChanged junto con el operador switchMap:

    cricketData$ = new Subject<string>();

ngOnChanges() {
  this.cricketData$
    .asObservable()
    .pipe(
      tap(() =>
        console.log(
          'Activando llamada REST para la pestaña de cricket con el año ',
          this.year
        )
      ),
      distinctUntilChanged(),
      switchMap((value) => this.myService.getData(value)),
      take(1)
    )
    .subscribe();
  this.cricketData$.next('sachin');
}

updateCricketData() {
  this.cricketData$.next('dravid');
}

    Explicación:

    1. Utilizamos distinctUntilChanged para emitir el valor del subject solo si es diferente al valor anterior. Esto significa que la llamada al servicio solo se activará si la selección de valor ha cambiado.

    2. Utilizamos switchMap para cambiar al nuevo observable devuelto por el método myService.getData(), cada vez que se emite un nuevo valor desde el subject.

    Con este enfoque, la llamada al servicio se activará solo una vez cuando el valor cambie, y el subject también se actualizará mediante el método del componente.

Comments are closed.