问题标签 [rxjs5]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
4 回答
42710 浏览

angular - 如何使用 Rx 在 Angular 2 中实现可拖动的 div

我一直在尝试使用 Angular 2 让可拖动的 div 工作。我使用angular2-examples repo 中的这个示例作为起点,只是真正调整代码以考虑删除该toRx()方法。该代码有效,但它不考虑mouseout事件。这意味着如果我点击一个 Draggable div,然后慢慢移动鼠标,该 div 将随着鼠标移动。但是,如果我将鼠标移动得太快,mouseout则会发送一个事件而不是一个mousemove事件,并且拖动停止。

mouseout在鼠标移动到触发事件后如何保持拖动?我已经尝试将mouseout事件流与事件流合并mousemove,以便将mouseout事件视为像事件一样mousemove,但这不起作用。

我正在使用 Angular 2.0.0-beta.12。

0 投票
1 回答
1410 浏览

angular - 使用角度 2 Rxjs 计算每秒的按键次数

我试图编写按键计数器的反应和非反应方式。看看函数reactiveWay()

它有效,但我认为可能有问题。

我在那里做了excersizes http://reactivex.io/learnrx/

并且有很多映射。

感觉就像 II 必须将时间事件映射到每秒发生的关键事件序列。但不明白我怎么能映射那些。

就像是

如果我使用 kps$,当第二次没有按键完成时,如何强制 kps$ 发出 0 总和?

更新

根据答案,我已经做到了。

但是当我订阅 obs 时,我每秒都不会收到包含 0 值的事件。当我在一秒钟内按下一些键时,我会得到按下的键数和另一个事件 0。然后事件停止,直到我再次按下键。我需要修改什么以便每秒获得事件?

0 投票
1 回答
485 浏览

rxjs5 - 如何使用 RxJS 5 缓冲功能?

我用谷歌搜索了很多,试图查看 d.ts 文件,但仍然无法理解出了什么问题。找不到 RxJs5 如何使用此功能的示例。

我收到错误:

错误:(166, 15) TS2345:'() => Observable<{}>' 类型的参数不可分配给'Observable' 类型的参数。类型“() => Observable<{}>”中缺少属性“_isScalar”。

buffer.d.ts 看起来是这样,我想我应该从中理解,但我不能。

这个问题来自: Counting keypresses per second with angular 2 Rxjs

0 投票
1 回答
5379 浏览

angular - 如何在angular2中使用异步主题?

嗨,我有一个简单的组件和一个服务。当用户单击提交按钮时,我正在调用一个服务,其中异步主题向其所有订阅者发出一个值。我已经使用主题完成了它,它工作正常,但我想使用异步来完成主题。我在这里做了一个演示http://plnkr.co/edit/tHjPVZ5NurJRWdCM9lbt?p=preview ...这是我的服务...

这是我订阅 asyncsubject 的组件类

但这是抛出错误......我不知道我在哪里做错了......有人请帮我纠正这个错误并告诉我如何使用异步主题并向其订阅者发出值

0 投票
2 回答
912 浏览

angular - 如何在 rxjs 异步主题中第二次触发 .next()?

我有一个有两个按钮的组件。当我根据下面给定 plunker 中的演示单击第一个按钮时,它会发出一个事件,我的服务函数会发出一个带有一些值的异步主题...当我单击另一个按钮时我试图再次调用 .next 事件,但它抛出了一些错误......我在这里做了一个 pluker 演示http://plnkr.co/edit/wpyV7o9JErdQMzGFZ4wp?p=preview ...如果我使用主题它工作正常但在这种情况下我不想使用主题...

这是我的服务类,这就是我为异步主题调用 .next 事件的方式。

这就是我订阅异步主题的方式...单击事件第一次正常工作,但是当我单击另一个按钮时它会引发错误。有人请帮我解决这个错误...我该如何调用 .next () 第二次使用我的异步主题...在此先感谢

0 投票
1 回答
1470 浏览

angular - 当使用 Observable.fromEvent() bufferTime() take(3) 和 subscribe() - 发出最后一个事件后出现错误“无法读取 null 的属性‘拼接’”

我正在 angular 2 beta 和 RxJS 5 上尝试这个。它可以毫无问题地获得 3 个事件并计算每秒的按键次数。为什么我会收到错误消息?我希望它在 3 秒后停止。

这是这个问题的延续: Counting keypresses per second with angular 2 Rxjs

更新

找到了如何不抛出的情况,以不同的方式定义源:

所以仍然存在问题 - 为什么它不适用于函数 fromEvent() ?我也看不到如何在此函数上定义 completed() 方法。所以它应该是一些默认值。

而且 - 我怎样才能从错误消息给我的信息中更快地找到 Observable.create 我需要 .complete() ?直到最近经过数小时的思考后,我才开始尝试——也许它需要完成()函数。

更新

实际上我上次更新的代码不能正常工作。它只是停止给我错误。

上次更新会发生什么 - 如果不按键,它会发出 0 次和 3 次事件。一旦按下 - 它会发出总和 1 的事件并停止发出。

更新:

如何在 web pack starter 上重现:

安装 angular 2 webpack starter 版本 5.0.3(版本 3 也出现错误)。

顺便说一句,我不得不将 package.json 从 Rxjs beta 4 更改为 beta 2,因为否则无法安装。

并在 home.comoponent.ts ngOnInit() 函数中将代码与https://jsbin.com/fafuldayi/edit?js,console,output几乎相同

唯一的区别是使用 Observable 并导入 Observable 而不是 Rx.Observable - 请参阅代码:

Thierry Templier 示例有效,但我也想了解为什么 Birowsky 示例无法与此入门包一起使用。

顺便说一句,我还看到 Birowsky 使用旧版本 - rxjs@5.0.0-alpha.8 。我试图在这个 url 中包含 beta.2,但后来我得到错误 Rx not found: https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.2/dist/global/Rx.js in jsbin .com

0 投票
3 回答
1082 浏览

javascript - 当另一个 Observable 发出时如何停止发出的值?

有两个 Observable,一个发出 mouseover 事件(去抖 500 毫秒),另一个发出 mouseout 事件,我正在寻找在第二个 Observable(mouseout)发生时阻止第一个 Observable(mouseover)发出的可能性。

0 投票
1 回答
1226 浏览

javascript - RXjs 从源中取消去抖动

我正在学习 Rx,所以我对 Rx 的一些机制不太了解,我想做的事情可以通过回调轻松完成,但我想了解 Rx。

所以我想要做的是,在事件 500ms 上消除鼠标抖动并显示一个 ui 界面,并在鼠标移出时隐藏该界面,所以我有这个代码:

我想要的是这样的:

我需要一些方向,提前谢谢。

0 投票
2 回答
1794 浏览

angular - 如何在 Angular2 中将 Observables 运算符与 EventEmitter (FormModel.valueChanges) 一起使用

我正在尝试在 EventEmitter 上使用一些简单的运算符(来自 FormModel.valueChanges),但我不知道它是如何完成的。

EventEmitter 类从 Subject 扩展,
export declare class EventEmitter<T> extends Subject<T>
所以我尝试了几件事:

this.patientForm.valueChanges.debounceTime(400) this.patientForm.valueChanges.source.debounceTime(400) this.patientForm.valueChanges.asObservable().debounceTime(400) Observable.create(this.patientForm.valueChanges).debounceTime(400)

在构造函数和 ngOnInit 中尝试过,
源始终未定义,并且类中不存在运算符。

我有这个进口import {Observable} from 'rxjs';可能是什么?

(我想做的是将表单状态保存在 Redux 存储中,但不想在每次击键时都这样做)

0 投票
0 回答
75 浏览

angular - 尝试在 RxJS 5 中实现一个简单的“首先检查 redux 存储”可观察

我在 Angular 2 应用程序中有以下场景:

  1. 当应用程序加载时,我有一个异步加载到 redux 商店的项目列表
  2. 用户导航到显示单个项目的路线

我想使用 rxjs 实现的是,如果用户请求的项目已经在商店中,那么只需返回它。否则,进行 HTTP 调用以加载请求的特定项目。

在许多情况下,所需的项目已经在商店中,但如果他们直接导航到 CRUD 页面,那么它有可能被加载,但还没有加载。如果我们正在使用分页,那么即使项目已完成加载,它也可能不存在。在这两种情况下,我只想直接对该项目进行 HTTP 调用。

我希望使用某种可观察的链来检查商店中的物品,如果它没有立即出现,那么 flatMap 使用 angular2 http 调用将返回该物品。

我有没有想过这个问题,是否有一组简单的运算符可以做到这一点?