Angular:保留可观察值的先前值

Question

我正在向后端发送 HTTP 请求并接收数据。我通过可观察流传递数据，并使用异步管道直接在 HTML 模板中订阅它。但是，我有一个问题。因为，我想一次又一次地通过单击按钮发送多个请求，所以我希望可观察者不断将新值添加到数据流中，而不是完全替换以前的值。我怎样才能做到这一点？

这是我的代码:

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">
...

如何在发送 HTTP 请求并将新值添加到现有值的同时保留可观察流中的先前值？

Answer 1

我同意这些评论。您可以创建一个缓存数组并利用它来返回以前的值。

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)
);

按钮点击可能如下所示:

loadMore()
{
   ....
  this.productService.buttonTrigger$.next('');
}