rxjs - Rxjs 可观察订阅 - 按钮点击未捕获

标签 rxjs observable

我正在尝试使用 Rx.js observable-subscribe 一个非常基本的示例。这是我的代码:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meter>
    <title></title>
</head>
<body>
<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.js"></script>
<script  src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="index.js"></script>

<button id='testButton'>Click</button>

</body>
</html>

JS

var button = $('#testButton');
var btn$ = Rx.Observable.fromEvent(button, 'click');

btn$.subscribe(function(e){
    console.log(e);
});

但是当我单击按钮时,控制台中没有任何内容。我错过了什么吗?

最佳答案

fromEvent 要求第一个参数是 DOM 元素。 $ 可能指的是 jQuery,它返回一个 jQuery 对象。

因此,您应该先从 button 中提取 native 元素,然后再将其传递给 fromEvent:

var button = $('#testButton');
var btn$ = Rx.Observable.fromEvent(button[0], 'click'); // or .get(0) instead of [0]

现场演示:https://stackblitz.com/edit/rxjs-lpvsng?file=index.ts

关于rxjs - Rxjs 可观察订阅 - 按钮点击未捕获,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55633352/

相关文章:

typescript - 使用 Observable 和 HttpClient 的 Angular 5 GET 数据 - 从 Web API 获取数据

带有 rxjs 的 Angular HttpClient

Angular Jasmine 测试 - onLangChange 回调未执行

javascript - 如何避免第一个未定义的订阅 JavaScript RxJS

javascript - 将 observable 数组的 observable 转换为 observable 数组

swift - 基于 Observable 值处理按钮触摸

angular - 扩展 Angular 2 ngModel 指令以使用可观察对象

javascript - 升级到 Angular 10 - 修复 CommonJS 或 AMD 依赖项可能导致优化救助

javascript - 可观察对象相对于异步迭代器的优势

typescript - Observable.interval 的问题 - 模板中的数据未更新,ngFor 的长度不正确,启动时获取轮询数据