Estoy tratando de usar tuberías asíncronas en lugar de suscribirme manualmente en componentes, en caso de que solo esté mostrando los datos que obtengo del servidor, todo funciona bien. Pero, ¿qué pasa si necesito cambiar la parte que se muestra de los datos que se muestran más tarde, en función de algún evento?
Por ejemplo, tengo un componente que muestra el horario, que luego puede ser aceptado por el usuario. Creo una hoja de tiempo $ observable y la uso en mi plantilla con tubería asíncrona. Para aceptar, creé el tema, para que pueda emitir, cuando el usuario acepta la hoja de tiempo. Pero, ¿cómo combino estos dos flujos (aprobación de cambio $ y hoja de tiempo $), para que la hoja de tiempo se actualice? Estaba probando combineLatest, pero devuelve los valores más recientes, por lo que no puedo decidir si el valor del flujo de aprobaciónChange es nuevo o antiguo. ¿Alguna idea de como resolver esto?
export class TimesheetComponent { errorMessage: string = ''; timesheet$: Observable<Timesheet>; private approvementSubject = new Subject<TimesheetApprovement>(); approvementChange$ = this.approvementSubject.asObservable(); constructor( private planService: PlanService, private statusService: StatusService, private notifService: NotificationService ) {} this.timesheet$ = this.statusService.appStatus.pipe( switchMap((status) => { return this.planService.getTimesheet( status.selectedMonth, status.selectedAgency.agNum ); }) ); //get data every time user changed selected month approveTimesheet(isApproved: boolean = true) { const approvement: TimesheetApprovement = { isApproved: isApproved, approveTs: new Date(), isLock: true, }; this.approvementSubject.next(approvement); } }Pero, ¿qué pasa si necesito cambiar la parte que se muestra de los datos que se muestran más tarde, en función de algún evento?
RxJS proporciona muchos operadores para combinar, filtrar y transformar observables.
Puede usar el scan para mantener un "estado" al proporcionar una función que recibe el estado anterior y la emisión más reciente.
Veamos un ejemplo simplificado usando una interfaz de Item genérica:
interface Item { id : number; name : string; isComplete : boolean; }Usaremos 3 observables diferentes:
initialItemState$ : representa el estado inicial del elemento después de ser obtenidoitemChanges$ - representa modificaciones a nuestro artículoitem$ - emite el estado de nuestro elemento cada vez que se le aplica un cambio private itemChanges$ = new Subject<Partial<Item>>(); private initialItemState$ = this.itemId$.pipe( switchMap(id => this.getItem(id)) ); public item$ = this.initialItemState$.pipe( switchMap(initialItemState => this.itemChanges$.pipe( startWith(initialItemState), scan((item, changes) => ({...item, ...changes}), {} as Item), )) ); Puede ver que definimos item$ al canalizar initialItemState$ al elemento observable itemChanges$ . Usamos startWith para emitir el initialItemState en el flujo de cambios.
Toda la magia sucede dentro del scan , pero la configuración es realmente simple. Simplemente proporcionamos una función que acepta el estado anterior y el nuevo cambio y devuelve el estado actualizado del elemento. ( En este caso, solo aplico ingenuamente los cambios al estado anterior; es posible que esta lógica deba ser más sofisticada para su caso).
Esta solución es completamente reactiva. El resultado final es un item$ observable limpio que emitirá el estado actualizado del elemento actual (basado en la identificación), siempre que la identificación cambie o los cambios ocurran en el elemento.
Aquí hay un StackBlitz donde puedes ver este comportamiento.
solo necesita realizar un seguimiento de la approvementChange
después de eso, puede elegir la última hoja de horas a través withLatestFrom
approvementChange$ .pipe(withLatestFrom(this.timesheet$)) .subscribe(([accepted, latestTimesheet]) => accepted ? save(latestTimesheet) : void 0)