JavaScript

Question

我是RxJ的新手。 RxJS 6.2的版本。

我正在尝试fromEvent方法并过滤掉鼠标事件信息，但是即使clientX大于500并且它似乎显示过滤器方法也不起作用，它也会显示鼠标位置数据。

谁能告诉我我做错了什么以及如何解决？

JavaScript

import { Observable, fromEvent } from "rxjs";
import { map, filter } from 'rxjs/operators';

let numbers = [1, 5, 10];

const source = fromEvent(document, "mousemove");
source.pipe(
  map((e: MouseEvent) => {
    return {
      x: e.clientX,
      y: e.clientY
    }
  }),
  filter(value => value.x < 500)
)

source.subscribe(
    value => console.log(value),
    e => console.log(`error: ${e}`),
    () => console.log('complete')
  );

Answer 1

对pipe的调用将返回一个新的可观察值-您将忽略它。它不会修改source的观察值。

您应该订阅pipe返回的可观察对象，而不是source可观察对象：

const source = fromEvent(document, "mousemove");

const mappedAndFiltered = source.pipe(
  map((e: MouseEvent) => {
    return {
      x: e.clientX,
      y: e.clientY
    };
  }),
  filter(value => value.x < 500)
);

mappedAndFiltered.subscribe(
  value => console.log(value),
  e => console.log(`error: ${e}`),
  () => console.log('complete')
);

fromEvent函数中的筛选器运算符在RxJS6中不起作用

JavaScript

1 个答案: