如何在 Angular 11 / Rxjs 中等待更新时保留可观察异步管道数组的最后一个值

Question

我正在迭代从使用 'NgFor' 的服务获得的对象数组。

起初我更新了订阅方法中的对象数组变量，我意识到两件事。

this._myService.sendRequest(input).subscribe((value: SomethingInterface[]) => {
    this.objectArray = value.map((v) => new Something(v))
});

首先：（优点）如果我发出新请求，旧值将保留，直到我收到新值。

其次：（缺点）如果我做多个请求，它们会被放入队列中，每个请求都会消耗不必要的带宽。

然后我转向异步管道，又意识到另外两件事。

this.objectArrayObservable = this._myService.sendRequest(value: SomethingInterface[]).pipe(
    map((value) => value.map((v) => new ChartDisplayDOM(v)))
);

首先：（优点）如果我进行多次请求，旧的请求将被取消，并且只发出最后一个请求。

其次：（缺点）在等待请求完成时，数组是空的。。。我不想做加载栏。

有没有办法兼顾两者的优势？

If I do a new request the old value is keeped until I receive a new value.

If I do multiples requests the old are cancelled, and only the last request is made.

我尝试了一些运算符组合，例如 'combineLatest' 和两个不同的 Observables，但我不知道如何解决它。

Answer 1

与其在每个用户操作上创建新链，不如只创建一个以 Subject 实例开头的链：

s = new Subject();

...

s.pipe(
  switchMap(input => this._myService.sendRequest(input)),
).subscribe((value: SomethingInterface[]) => {
  this.objectArray = value.map((v) => new Something(v))
});

...
// User does some action...
s.next(input);

switchMap() 将确保如果有任何待处理的请求，它将被取消。只是不要忘记在销毁组件时取消订阅。

如何在 Angular 11 / Rxjs 中等待更新时保留可观察异步管道数组的最后一个值

How to keep the last value from observable Async pipe array while waiting for update in Angular 11 / Rxjs

rxjs

angular

rxjs-pipeable-operators