代码之家 › 专栏 › 技术社区 › Jan Nielsen

发出最近的N个事件

rxjs angular

0

Jan Nielsen · 技术社区 · 7 年前

在我的Angular6应用程序中,我想展示从web套接字发出的连续事件流中最近的N个事件。

今天,这个视图展示了来自RxJS的数据 Observable<Event[]>

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

数组包含最后N个事件,并在服务层中进行管理。不是很好。

如果可能的话,我想把这个改成一个有界的RxJS队列——你能帮忙吗?

1 回复 | 直到 7 年前

1

2

cartant 7 年前

你应该能够使用 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))
);