Question

在Angular 6应用程序中，我想显示来自网络套接字的连续事件流中最近的N个事件。

今天，该视图显示了来自RxJS Observable<Event[]>的数据：

<div *ngFor="let event of (wsEvents | async)">
...

该数组包含最近N个事件，并在服务层中进行管理。不太好。

如果可能的话，我想将其更改为有限的RxJS队列-您能帮忙吗？

Answer 1

您应该可以使用scan运算符来实现所需的内容：

const { range } = rxjs;
const { scan } = rxjs.operators;

const N = 4;

range(0, 10).pipe(
  scan((acc, value) => [...acc.slice(1 - N), value], [])
).subscribe(
  value => console.log(JSON.stringify(value))
);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://unpkg.com/rxjs@6/bundles/rxjs.umd.min.js"></script>

您可以将实现包装在一个函数中以创建用户界面运算符：

import { MonoTypeOperatorFunction, scan } from "rxjs";

export function bufferRecent<T>(count: number): MonoTypeOperatorFunction<T> {
    if (count < 2) {
        throw new Error("Expected count > 1");
    }
    return scan((acc: T[], value: T) => [...acc.slice(1 - count), value], []);
}

您将这样使用：

range(0, 10).pipe(
  bufferRecent(N)
).subscribe(
  value => console.log(JSON.stringify(value))
);

发出最近的N个事件

1 个答案: