Observable.create(...).map 不是一个函数。

Question

我刚学习了Pluralsight - 使用RxJS入门响应式编程

为什么不起作用？

我使用的是RXJS 6.2.0版本。

import {Observable} from 'rxjs';

const numbers = [1, 5, 10];
const source = Observable.create(observer => {

  let index = 0;
  let produceValue = () => {
    observer.next(numbers[index++]);

    if (index < numbers.length) {
      setTimeout(produceValue, 2000);
    } else {
      observer.complete();
    }
  };

  produceValue();

}).map(n => n * 2)
  .filter(n => n > 4);

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

- Rae

---

Observable.create() 返回的是一个Observable，而不是一个数组。 - Joseph Webber

在v6中，您需要使用可管道化的操作符或者需要在rxjs旁边安装rxjs-compat。请参阅迁移指南。此外，使用new Observable优于使用Observable.create。 - cartant

Answer 1

我曾经学过相同的课程，并且能够使用管道符号和在箭头函数的参数中输入变量来解决这个问题，具体如下：

...
let source = Observable.create(observer => {

    let index = 0;
    let produceValue = () => {

        observer.next(numbers[index++]);

        if (index < numbers.length) {
            setTimeout(produceValue, 250);
        } else {
            observer.complete();
        }
    }

    produceValue();
}).pipe(
    map((n: number) => n * 2),
    filter((n: number) => n > 4)
);
...

要求在管道内使用操作符是 RxJs 的最新变化，因此一些课程和参考资料可能已经过时。

- Rodrigo Marcondes

---

欢迎来到StackOverflow。虽然这段代码可能回答了问题，但提供关于为什么和/或如何回答该问题的额外上下文可以提高其长期价值。 - Richie Thomas

Answer 2

根据评论的建议，您现在应该使用管道。

您的代码已经编辑过：

import {Observable} from 'rxjs';
import {map, filter} from 'rxjs/operators';
const numbers = [1, 5, 10];
const source = Observable.create(observer => {

  let index = 0;
  let produceValue = () => {
    observer.next(numbers[index++]);

    if (index < numbers.length) {
      setTimeout(produceValue, 2000);
    } else {
      observer.complete();
    }
  };

  produceValue();

}).pipe(map<number, number>(n => n * 2),filter(n => n > 4)); // Here we pipe operators, you can provide any number of operators. or chain many pipe. 

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

在线示例

- Yanis-git

---

在Angular/TypeScript中，使用RxJs 6+，你必须调用map函数的泛型版本。map<number, number>(n => n * 2) - Saturn K

抱歉，我不理解你试图解释什么，我的示例可以改进什么？ - Yanis-git

谢谢你们两个。@Yanis-git请更新你的答案，在map后面添加<number, number>。没有它会生成一个错误：[ts]算术操作的左侧必须是任意类型、数字或枚举类型。 - EranKT