Estoy enviando una solicitud HTTP a un servidor y recibiendo los datos. Paso los datos a través de un flujo observable y los suscribo directamente en mi plantilla HTML usando una canalización asíncrona. Sin embargo, tengo un problema. Dado que quiero enviar múltiples solicitudes con el clic del botón una y otra vez, quiero que el observable siga agregando los nuevos valores al flujo de datos en lugar de reemplazar por completo los anteriores. ¿Cómo puedo hacer eso?
Aquí está mi código:
TS
productsData$ = this.productService.getProduct(this.payload); loadMore() { .... this.productsData$ = this.productService.getProduct(updatedpayload); }HTML
<div class = "grid" *ngIf="productsData$ | async as productsData"> <div class="p-col-12 p-md-6 p-lg-3" *ngFor = "let pData of productsData; let i = index"> ...¿Cómo puedo conservar los valores anteriores en el flujo observable mientras envío una solicitud HTTP y agrego los nuevos a los existentes?
Estoy de acuerdo con los comentarios. Puede crear una matriz de caché y aprovecharla para devolver también los valores anteriores.
private readonly previousProductsData = []; readonly buttonTrigger$ = new BehaviourSubject(''); productsData$ = this.buttonTrigger$.pipe( switchMap(()=> this.productService.getProduct(this.payload)), tap((product)=> { this.previousProductsData.push(product) }), map(()=> this.previousProductsData) );y el clic del botón podría verse así:
loadMore() { .... this.productService.buttonTrigger$.next(''); }empuje la respuesta a una matriz y utilícela para mostrar
this.productsData$ = this.productService.getProduct(updatedpayload); this.productArray.push(this.productsData$);Y muestra productArray